この機能を使用して自己ルールを繰り返さないようにするにはどうすればよいですか

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');

はそこからではなく、個別に各1を書き出すのそれらにイベントリスナーを添付することができます。

クリックリスナーの内部では、現在のイベントターゲットの背景と、それより低いIDを持つすべてのものをimg2とします。

Answer 3

：ここで私はそれを単純化する機能があります。星のイドを渡す。 if文で確認し、一致すると停止します。