Javascript를 사용하여 리뷰 별점을 추가하는 방법
11632 단어 javascriptwebdev
첫 번째 단계는 HTML 페이지에 Font Awesome 링크를 추가하는 것입니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
다음은 링크가 포함된 헤드가 포함된 전체 HTML 파일입니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Fish Store</title>
<style>
body {
padding: 25px;
}
</style>
</head>
다음은 Javascript 코드를 만드는 것입니다. 이 예에서는 별점 5개 리뷰를 사용하고 있습니다. 내 코드에는 createDiv() 함수가 있습니다. 이것은 단순히 웹 애플리케이션 구조에 대해 할당된 ID로 Div 요소를 생성하는 것입니다. 이 예에서 내 별 ID는 newreviewstars11, newreviewstar21, newreviewstar31, newreviewstar41 및 newreviewstar51입니다. 이 별들은 className "fa fa-star"로 시작합니다. "fafa-star"className은 처음 생성될 때 강조 표시되지 않습니다.
//create the div star element
newDiv = createDiv("newreviewstars", reviewId)
form.appendChild(newDiv)
// for loop to generate the number of stars, in this instance 5.
for (let k = 1; k < 6; k++){
let starDiv = createDiv('fa fa-star', k)
starDiv.setAttribute("id", `newreviewstar${k}${reviewId}`)
element = newDiv.appendChild(starDiv)
}
별을 색상으로 채우려면 div 클래스 이름을 "fa fa-star checked"로 변경하고 ".checked"참조를 CSS 파일에 추가해야 합니다.
다음은 className을 변경하는 방법의 예입니다. 필요한 기능에 따라 className을 변경하려면 JS 코드를 생성해야 합니다.
starDiv.className = 'fa fa-star checked'
이것은 별이 "선택"되면 주황색으로 별을 채우기 위해 CSS 파일에 들어가는 것입니다.
.checked {
color: orange;
}
별을 동적으로 만들려면 각 별 요소에 리스너를 추가해야 합니다.
// creates a listener for selecting the number of stars when creating a new review
function reviewStarsListener(newReviewId){
//obtain stars element, which is displayed as an array
for (let i = 1; i <= 5; i++){
let star = document.getElementById(`newreviewstar${i}${newReviewId}`)
star.addEventListener("click", function(){highlightStar(star, newReviewId)});
}
}
기능과 관련하여 고려해야 할 몇 가지 사항이 있습니다.
내 청취자는 clearStars() 함수를 먼저 수행한 다음 동적으로 변경할 수 있는 방식으로 별을 강조 표시하는 highlightStar() 함수를 실행합니다.
// highlights additional stars when a high star value is selected.
// e.g. if star 4 is selected then this will highlight star 1 - 4.
function highlightStar(starDiv, newReviewId){
clearStars(newReviewId)
starSelected = starDiv.id.replace("newreviewstar", "")
numOfStars = starSelected.charAt(0)
for (let i = 1; i <= numOfStars; i++){
let starDiv = document.getElementById(`newreviewstar${i}${newReviewId}`)
starDiv.className = 'fa fa-star checked'
}
}
// allow reviewer to dynamically be able to click on the stars to
// change their # of stars review
function clearStars(newReviewId){
for (let i = 1; i <= 5; i++){
let starDiv = document.getElementById(`newreviewstar${i}${newReviewId}`)
starDiv.className = 'fa fa-star'
}
}
리뷰가 포함된 동적 웹 애플리케이션을 만들 때 도움이 되기를 바랍니다.
Reference
이 문제에 관하여(Javascript를 사용하여 리뷰 별점을 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chrisbaum89/how-to-use-javascript-to-add-review-stars-39hg텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
