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