1

Всем, привет) Пробую по примеру сделать звездный рейтинг для сайта, но не могу понять где ошибка в моем коде. Вроде все делаю как в примере, но у меня при клике не меняется цвет блоков. Кто-то может подсказать что не так. Код ниже. Заранее спасибо)

var rating = document.querySelectorAll(".rating"),
	 ratingDish = document.querySelectorAll(".ratingDish");


rating.onclick = function(e){
  var target = e.target;
  if(target.classList.contains('ratingDish')){
    removeClass(ratingDish,'active')
    target.classList.add('active');
  }
}

function removeClass(elements, className) {
  for (var i = 0; i < elements.length; i++) {
     elements[i].classList.remove(className);
  }
}
*{
  box-sizing: border-box;
}

   
.ratingDish {
  width: 30px;
  height: 30px;
  float: left;
  margin: 2px;
  background-color: yellow;
  cursor: pointer;
}

.ratingDish.active ~ .ratingDish {
 background-color: blue;
}

.rating:hover .ratingDish {
  background-color: yellow;
}


.ratingDish:hover ~ .ratingDish {
 background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="rating">
	<div class="ratingDish active"></div>
	<div class="ratingDish"></div>
	<div class="ratingDish"></div>
	<div class="ratingDish"></div>
	<div class="ratingDish"></div>
</div>
<script src="app.js" ></script>
</body>
</html>

0

1 ответ 1

3

Я так понимаю таких элементов на странице будет несколько и по этому Вы используете querySelectorAll, так вот, Вы вешаете onclick не на элемент, а на NodeList, который вернулся из вызова querySelectorAll, вместо этого нуджо вешать его на каждый элемент этого листа. Так же подэлементы нужно искать только внутри конкретного рейтинга, а не по всему документу

var ratings = document.querySelectorAll(".rating");

ratings.forEach(function (rating){

  var ratingDish = rating.querySelectorAll(".ratingDish");
  rating.onclick = function(e){
    rating.classList.remove('unselected');
    var target = e.target;
    if(target.classList.contains('ratingDish')){
      removeClass(ratingDish,'active')
      target.classList.add('active');
    }
  }
  
});

function removeClass(elements, className) {
  for (var i = 0; i < elements.length; i++) {
     elements[i].classList.remove(className);
  }
}
*{
  box-sizing: border-box;
}

   
.ratingDish {
  width: 30px;
  height: 30px;
  float: left;
  margin: 2px;
  background-color: yellow;
  cursor: pointer;
  transition:400ms;
}

.ratingDish.active ~ .ratingDish {
 background-color: blue;
}

.rating:hover .ratingDish,
.rating.unselected:hover .ratingDish.active {
  background-color: yellow;
}

.ratingDish:hover ~ .ratingDish,
.rating.unselected .ratingDish.active {
 background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="rating unselected">
	<div class="ratingDish active"></div>
	<div class="ratingDish"></div>
	<div class="ratingDish"></div>
	<div class="ratingDish"></div>
	<div class="ratingDish"></div>
</div>
<div class="rating unselected">
	<div class="ratingDish active"></div>
	<div class="ratingDish"></div>
	<div class="ratingDish"></div>
	<div class="ratingDish"></div>
	<div class="ratingDish"></div>
</div>
<script src="app.js" ></script>
</body>
</html>

5
  • @Ania_N Я пожалуйста,я так понимаю мое предположение было верным? 11 июл 2019 в 8:22
  • да все верно) Спасибо
    – Ania_N
    11 июл 2019 в 8:31
  • а как сделать чтоб и первый блок был синим, а при клике менял цвет на желтый и т.д.
    – Ania_N
    11 июл 2019 в 9:18
  • @Ania_N я сделал, смотрите историю изменений ru.stackoverflow.com/posts/1001669/revisions 11 июл 2019 в 9:33
  • Огромное спасибо)
    – Ania_N
    11 июл 2019 в 9:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.