добавление классов к предыдущим элементам

Question

Пытаюсь решить задачу со звездным рейтингом. При наведении на любую из звезд, данной звезде должен ставиться класс golden, также такой класс должен ставиться всем звездам до нее слева.

"use strict";

const starsContainer = document.querySelector('.stars_container');
const stars = document.querySelectorAll('.fas');

starsContainer.addEventListener('mouseover', e => {
  let item = e.target;
  if (item.classList.contains('fas')) {
    Array.from(stars).forEach((el, index, arr) => {
      item.classList.add('golden');
      item = item.previousElementSibling;
    });
  }
});

i {
  font-size: 50px;
}

.golden {
  color: gold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />

<div class="stars_container">
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
</div>

Когда мы уводим курсор мыши от звезды, все поставленные классы golden должны быть удалены.

кое что написал, однако, получаю ошибку:

Error {
  "message": "Uncaught TypeError: Cannot read properties of null (reading 'classList')",
  "filename": "https://stacksnippets.net/js",
  "lineno": 35,
  "colno": 12
}

В консоле:

Uncaught TypeError: Cannot read properties of null (reading 'classList')
at Array.forEach (<anonymous>)
at HTMLDivElement.<anonymous

Answer 1

Прошу любить и жаловать мой вариант)

const stars = document.querySelectorAll('.fa-star');

for (let i = 0; i < stars.length; i++) {
  stars[i].addEventListener('mouseover', function() {
    changeStarrt(i);
  })
}

function changeStarrt(num) {
  for (let i = 0; i <= num; i++) {
    stars[i].classList.add('golden');
  }

  for (let i = stars.length - 1; i > num; i--) {
    stars[i].classList.remove('golden');
  }
}

i {
  font-size: 50px;
}

.golden {
  color: gold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />

<div class="stars_container">
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
</div>

Answer 2

Вам не обязательно использовать JS. В CSS есть селектор ~, позволяющий выбрать соседние элементы, которые находятся на этом же уровне вложенности, после указанного элемента. Чтобы это заработало, нужно изменить порядок следования звездочек. В этом нам поможет flex:

i {
  font-size: 50px;
}

.stars_container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: left;
  cursor: pointer;
}

.fas:hover,
.fas:hover~.fas {
  color: gold;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="stars_container">
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
</div>

БЛОГ НА HUSL

добавление классов к предыдущим элементам

Ответы (2 шт):