Показать сообщение отдельно
  #2 (permalink)  
Старый 30.01.2018, 22:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,056

звёздный рейтинг на js
Ramundo,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
   window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".bar"), function(el) {
        var cell = el.querySelector(".cell");
        el.addEventListener("click", function(event) {
            var elem = event.target,
                cls = elem.classList;
            if (cls.contains("cell")) {
                elem == cell ? (cell.classList.toggle("selected"), el.classList.toggle("act")) :
                (cell.classList.remove("selected"), el.classList.add("act"),
                 elem.classList.add("selected"), cell = elem);
            }
        });
    });
});
  </script>
</head>

<body>
<style type="text/css">

.bar{
  border: solid yellow;
  display:inline-block;
  cursor: pointer;

}
.bar.act .cell {
    background-color: SteelBlue;
}


.bar.act .cell.selected ~ .cell{
    background-color: PaleTurquoise;
}

.cell{
  border: solid blue 2px;
  display:inline-block;
  width:14px;
  height:12px;
  background-color: PaleTurquoise;
}


</style>

<div class = "bar">
  <div class = "cell"  data-val = "1"></div>
  <div class = "cell"  data-val = "2"></div>
  <div class = "cell"  data-val = "3"></div>
  <div class = "cell"  data-val = "4"></div>
  <div class = "cell"  data-val = "5"></div>
  <div class = "cell"  data-val = "6"></div>

</div>
<div class = "bar">
  <div class = "cell"  data-val = "1"></div>
  <div class = "cell"  data-val = "2"></div>
  <div class = "cell"  data-val = "3"></div>
  <div class = "cell"  data-val = "4"></div>
  <div class = "cell"  data-val = "5"></div>
  <div class = "cell"  data-val = "6"></div>
</div>
</body>
</html>
Ответить с цитированием