Простой звездный рейтинг

В этой статье я покажу как сделать визуальную часть звездного рейтинга. А именно:

• как можно стилизовать
• как правильно сделать 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++;
    }
  });

});