У цій статті я покажу, як зробити візуальну частину зіркового рейтингу. А саме:
- як можна стилізувати
- як правильно зробити 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++;
}
});
});