어떻게이 기능을 사용하여 자체 규칙을 반복하지 마십시오.

Question

그 개발자,

이 코드를 더 잘 작성하는 방법에 대한 의견을 듣고 싶습니다.

star3 버튼을 클릭하면 노란색 별표가 노란색으로 표시되어 노란색으로 표시됩니다. star3 위의 별은 회색입니다.

는

var star = document.getElementById("star-0"); 
 
var star1 = document.getElementById("star-1"); 
 
var star2 = document.getElementById("star-2"); 
 
var star3 = document.getElementById("star-3"); 
 
var star4 = document.getElementById("star-4"); 
 
var img = 'url(img/star.png)'; 
 
var img2 = 'url(img/star2.png)'; 
 

 

 
star4.addEventListener('click', function(){ 
 
    star.style.backgroundImage = img2; 
 
    star1.style.backgroundImage = img2; 
 
    star2.style.backgroundImage = img2; 
 
    star3.style.backgroundImage = img2; 
 
    star4.style.backgroundImage = img2; 
 
}); 
 

 
star3.addEventListener('click', function(){ 
 
    star.style.backgroundImage = img2; 
 
    star1.style.backgroundImage = img2; 
 
    star2.style.backgroundImage = img2; 
 
    star3.style.backgroundImage = img2; 
 
    star4.style.backgroundImage = img; 
 
}); 
 

 
star2.addEventListener('click', function(){ 
 
    star.style.backgroundImage = img2; 
 
    star1.style.backgroundImage = img2; 
 
    star2.style.backgroundImage = img2; 
 
    star3.style.backgroundImage = img; 
 
    star4.style.backgroundImage = img; 
 
}); 
 

 
star1.addEventListener('click', function(){ 
 
    star.style.backgroundImage = img2; 
 
    star1.style.backgroundImage = img2; 
 
    star2.style.backgroundImage = img; 
 
    star3.style.backgroundImage = img; 
 
    star4.style.backgroundImage = img; 
 
}); 
 

 
star.addEventListener('click', function(){ 
 
    star.style.backgroundImage = img2; 
 
    star1.style.backgroundImage = img; 
 
    star2.style.backgroundImage = img; 
 
    star3.style.backgroundImage = img; 
 
    star4.style.backgroundImage = img; 
 
});

Answer 1

등급 별을 구현하려는 것 같습니다. HTML에서 스마트 또는 메타 데이터를 사용하지 않는 JS 만 사용하는 것이 좋습니다.

var star = document.getElementById("star-0"); 
 
var star1 = document.getElementById("star-1"); 
 
var star2 = document.getElementById("star-2"); 
 
var star3 = document.getElementById("star-3"); 
 
var star4 = document.getElementById("star-4"); 
 
var img = 'url(img/star.png)'; 
 
var img2 = 'url(img/star2.png)'; 
 

 
function updateRating(rating) { 
 
    var stars = [star, star1, star2, star3, star4]; 
 
    for(var i = 0; i < stars.length; i++) { 
 
    var appliedImage = img; 
 
    if ((i + 1) < rating) { 
 
     appliedImage = img2; 
 
    } 
 
    
 
    stars[i].style.backgroundImage = appliedImage; 
 
    } 
 
} 
 

 

 
star4.addEventListener('click', function(){ 
 
    updateRating(5); 
 
}); 
 

 
star3.addEventListener('click', function(){ 
 
    updateRating(4); 
 
}); 
 

 
star2.addEventListener('click', function(){ 
 
    updateRating(3); 
 
}); 
 

 
star1.addEventListener('click', function(){ 
 
    updateRating(2); 
 
}); 
 

 
star.addEventListener('click', function(){ 
 
    updateRating(1); 
 
});

Answer 2

별 공통 클래스와 같은 모든주세요 .. 내가 내 코드에서보다 효율적으로하는 방법을 알고 싶어 내가 가지고 무엇을 내가 필요하지만, 그게 전부 class="stars". 그런 다음을 수행하십시오

var star1 = document.querySelector('.stars');

은 거기에서 대신 개별적으로 하나 하나를 작성하는 그들에 이벤트 리스너를 첨부 할 수 있습니다.

클릭 수신기 내부에서 현재 이벤트 대상의 배경과 자신보다 낮은 ID를 가진 모든 것들을 img2으로 설정하십시오.

Answer 3

하나를 사용하여 기능은 모든 별을 추가하고 클릭 이벤트와 함께 전화 : 여기에 단순화 할 기능입니다. 별의 이드를 지나쳐라. if 문과 일치하는지 확인하고 일치하면 중지하십시오.