Компонент звездного рейтинга с использованием flex-box «Заказ» 😉

У меня есть небольшой совет на сегодня

Вы когда-нибудь собирали такой компонент?

Прежде чем я узнал о хаке, который я вам покажу,
я хочу рассказать о таком компоненте, который я собрал с помощью JavaScript и переключения классов. Код вы можете найти здесь. Это работало так:
1. добавить обработчик события mouseover на звездах
2. найти индекс наведенной звезды
3. добавить к нему класс gold и все звезды с индекс ниже наведенного
Это сработало, но вам нужно удалить класс золото из всех звезд на mouseout.
Итак, теперь у вас есть два слушателя и есть этот момент мигания, когда для доли секунды все Звезды теряют свое свечение:

Я думаю, что я поднял дело, так что вернемся к моей подсказке.

В CSS есть хороший селектор, который позволяет вам выбирать elem и его братьев и сестер.

Но сначала давайте встроим звезды в HTML:

<!-- html -->
<div class="container" id="stars"></div>
/* css */
/* not important css */
button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
svg {
  transition: fill .1s ease;
}
/* important css */
.container {
  display: inline-flex;
}
// js
const container = document.getElementById("stars")
const ratings = [5, 4, 3, 2, 1]
const deathStar = `<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M2.05,13H21.95C21.45,18.05 17.19,22 12,22C6.82,22 2.55,18.05 2.05,13M21.95,11H2.05C2.55,5.95 6.82,2 12,2C17.18,2 21.45,5.95 21.95,11M12,6.75A2.5,2.5 0 0,0 9.5,4.25A2.5,2.5 0 0,0 7,6.75A2.5,2.5 0 0,0 9.5,9.25A2.5,2.5 0 0,0 12,6.75Z"/></svg>`;
function createStar(rating) {
  const star = document.createElement("button")
  star.innerHTML = deathStar
  star.classList = `star star--${rating}`
  star.title = rating
  return star
}
const stars = ratings.map(createStar)
stars.forEach(star => container.appendChild(star))

Результат выглядит следующим образом:

Теперь добавим эффект наведения, чтобы изменить заливку SVG и его братьев и сестер:

.star:hover,
.star:hover ~ .star {
  fill: gold;
}

Эффект:

Поскольку CSS-селектор ~ для братьев и сестер может «поймать» только следующих братьев и сестер (селектора для предыдущих по-прежнему нет), наши звезды выглядят как выделенные сзади.

Думаю, теперь вы уже догадались, что я вам покажу 😊

Если мы подготовим наши классы CSS, используя порядок гибкости для отображения в обратном направлении:

.star--1 {
  order: 1;
}
.star--2 {
  order: 2;
}
.star--3 {
  order: 3;
}
.star--4 {
  order: 4;
}
.star--5 {
  order: 5;
}

Мы получим что-то вроде этого:

У нас есть симпатичный компонент рейтинга смерти ⭐ ✔

Весь код можно найти по этой ссылке codepen.io.

Отказ от ответственности. С этим решением есть небольшая проблема.
Поскольку мы изменили порядок отображения элементов с помощью flex-box, они отображаются на экране в правильном направлении от с 1 по 5.
Хотя в HTML они по-прежнему присутствуют в обратном порядке от 5 до 1.
При переходе с помощью кнопки «Tab» на клавиатуре по элементам сначала фокусируется на последнем элементе (5). Что для меня совсем не плохо.
Это похоже на предложение покупателю поставить оценку выше, а затем ниже 😊
Вот и все, спасибо за чтение💛🐱‍💻