0

у меня есть несколько объектов с одним классом(сердечки), я хочу сделать их красными прим нажатии через js. каждую кнопку перебирать не вариант. добавляю константу через queryselectorALL и получаю массив из этих кнопок. как организовать? введите сюда описание изображения

7
  • 1
    Какая красивая задача) А вам обязательно это делать через JS?) Не хотите потсавить скрытые чекбоксы и по их значениями менять цвет и это будет полностью на CSS?☺️
    – EzioMercer
    17 мая 2022 в 14:52
  • через чекбоксы некрасиво, их приходится всё время вставлять, а js делает это автоматически имея просто класс ну или класс 17 мая 2022 в 15:07
  • Это не некрасиво - это вам просто лишний тег не хочутся писать. Пользователю он всё равно не будет виден) Но зато будет эффективнее работать) Ладно чёрт с ним) Что вам конкретно надо? Как менять класс через JS? Или как заполнить само сердечко через CSS св-ва? Если второе, то вам в обязательном порядке надо поделиться с нами вёрсткой (НО ТОЛЬКО СЕРДЕЧКИ), чтобы мы могли хотя бы увидеть с чем имеем дело
    – EzioMercer
    17 мая 2022 в 15:11
  • А ещё очень рекомендую прочитать про делегирование событий - это в разы проще, надёжнее и эффективнее чем каждому элементу отдельно назначать событие. Тем более, если вдруг динамечски добавится сердечко, то на нём уже не отработает событие, т.к. в момент поиска его не было на странице, а вот с помощью делегирования событий эта проблема легко решается
    – EzioMercer
    17 мая 2022 в 15:14
  • ну например можно получить коллекцию сердечек, потом через forEach (повесить на каждую addEventListener, и при клике навешивать активный класс 17 мая 2022 в 15:32

1 ответ 1

1

const element = document.querySelectorAll('.element');

element.forEach(el => el.addEventListener('click', function () {
  el.classList.toggle('active');
}))
.block {
  display: flex;
}

.element {
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
}

.active {
  color: red;
  border: 2px solid tomato;

}
<div class="block">
  <div class="element">Раз</div>
  <div class="element">Два</div>
  <div class="element">Три</div>
  <div class="element">Четыре</div>
</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.