Как я могу избежать не повторять свое правило с этой функцией

Он разработчики,

Я хочу узнать ваше мнение о том, как лучше написать этот код.

Если вы нажмете на кнопку star3, она будет изменяться, так как желтая звезда снизу также желтая. Звезда над звездой 3 просто серая.

Вот что я получил и что мне нужно, но я хочу знать, как я могу быть более эффективным в моем коде..

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

Источник

3 ответа

Решение

Похоже, вы пытаетесь реализовать рейтинг звезд. Если вы настаиваете только на использовании 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);
});

Источник

Дайте всем звездам общий класс, как class="stars", Затем сделайте:

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

Оттуда вы можете прикрепить к ним прослушиватель событий вместо того, чтобы записывать каждого из них по отдельности.

Внутри прослушивателя кликов установите фон для текущей цели события и всех объектов с идентификатором ниже, чем он сам img2,

Источник

Используйте одну функцию, чтобы добавить все звезды и вызвать ее с помощью события click. Передайте идентификатор звезды. Проверьте с заявлениями if и остановитесь, когда это соответствует.

Источник
Другие вопросы по тегам