Простий зірковий рейтинг

У цій статті я покажу, як зробити візуальну частину зіркового рейтингу. А саме:

• як можна стилізувати
• як правильно зробити hover
• як правильно зберегти заливання зірки після кліку

Готовий варіант:

Розмітка

В якості розмітки у нас є блок контейнер з класом .rate всередині якого я розмістив 5 посилань. У якості самої зірки я використував шрифт. Але, швидше за все, на практиці замість нього доведеться використовувати зображення.

<div class="rate">
  <a href="#">☆</a>
  <a href="#">☆</a>
  <a href="#">☆</a>
  <a href="#">☆</a>
  <a href="#">☆</a>
</div>

Стилі

При стилізації варто звернути увагу на таке:

• щоб кожне посилання мало position: relative;

.rate a{
  text-decoration: none;
  color: yellow;
  position: relative;
  display: inline-block;
}

• Створюємо псевдоелемент: before. Ми будемо його використовувати як заповнювач зірки. У дефолтному стані ставимо йому opacity: 0;

.rate a:before{
  content: '★';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-event: none;
  opacity: 0;
}

• при ховері ми присвоюватимемо посиланням клас .hover, а при натисканні на них – клас .active. Ці класи робитимуть наш псевдоелемент видимим. Тому це ми теж прописуємо в стилях.

.rate a.hover:before,
.rate a.active:before{
  opacity: 1;
}

Скрипт

У скрипті збираємо наші зірки на сторінці і для кожної з них прописуємо додавання або видалення відповідного класу при наведенні або натисканні

let rateLink = document.querySelectorAll('.rate a');

rateLink.forEach((link, i) => {
  //mouseenter
  link.addEventListener('mouseenter', function(e){
    let num = 0;

    while(num <= i){
      rateLink[num].classList.add('hover');

      num++;
    }
  });
  
  //mouseleave
  link.addEventListener('mouseleave', function(e){
    rateLink.forEach(item => {
      item.classList.remove('hover');
    });
  });
  
  //click
  link.addEventListener('click', function(e){
    e.preventDefault();

    let num = 0;

    rateLink.forEach(item => {
      item.classList.remove('active');
    });

    while(num <= i){
      rateLink[num].classList.add('active');

      num++;
    }
  });

});