Звездный рейтинг для сайта

101
29 марта 2021, 07:40

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

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>

Answer 1

Я так понимаю таких элементов на странице будет несколько и по этому Вы используете 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>

READ ALSO
Проблема с фильтрацией таблицы с &lt;textarea&gt;
javascript

Проблема с фильтрацией таблицы с <textarea>

Использую плагин для фильтров на колонках таблицУ меня есть некоторые таблицы, в которых можно редактировать ячейки

 97
Как отсортировать массив по строковым значениям другого массива?
javascript

Как отсортировать массив по строковым значениям другого массива?

Есть два массива объектов:

 108
Модификация Iframe на php
javascript

Модификация Iframe на php

Есть задача модифицировать ютубовский плеерУ ютуба есть эмбендная ссылка такого типа - https://www

 100
barode reader в режиме эмуляции клавиатуры
javascript

barode reader в режиме эмуляции клавиатуры

Задача стоит в том, чтобы понимать где ввод с клавиатуры в где с ридераПроблема: Разница между событиями keyup и keydown нам известна, но я не могу...

 88