-1

他开发人员，

我想知道您对如何更好地编写此代码的看法。

如果你点击按钮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;
});

4

3 回答 3

0

给所有的星星一个共同的类，比如class="stars"。然后做：

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

从那里您可以为它们附加一个事件侦听器，而不是单独写出每个事件侦听器。

在点击侦听器内部，将当前事件目标的背景以及所有 id 低于自身的事件目标设置为img2。

于 2017-01-06T22:25:49.707 回答
0

似乎您正在尝试实施评级星级。如果你坚持只使用 JS 而不是在 HTML 中使用任何智能或元数据。这是我将其简化为的功能：

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

于 2017-01-06T22:26:18.887 回答
0

使用一个函数来添加所有的星星并通过点击事件调用它。传入星星的 id。检查 if 语句并在匹配时停止。

于 2017-01-06T22:26:25.000 回答