NooNoo
@NooNoo
Yep

Как повесить обработчик на несколько элементов?

Всем привет!

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

Код:
https://jsfiddle.net/qc6fhzLg/
  • Вопрос задан
  • 5380 просмотров
Решения вопроса 3
0xD34F
@0xD34F Куратор тега JavaScript
Вместо img класс лучше переключать у article - максимально дальних не общих предков картинок. Если вдруг захотите при кликах на кнопки стилизовать ещё что-то помимо картинок, или измените взаимное расположение элементов, то не придётся переписывать js-код. Стили, конечно, придётся немного поправить, вместо .active будет .active img.

const container = document.querySelector('.container');
const itemSelector = 'article';
const buttonSelector = `${itemSelector} .btn`;
const activeClass = 'active';

Делегирование, назначаем обработчик один раз:

container.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    button.closest(itemSelector).classList.toggle(activeClass);
  }
});

Или каждой кнопке индивидуально:

container.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));
Ответ написан
Комментировать
@Finch_85
https://jsfiddle.net/mdsmmy3L/2/

Немного переделал вариант товарища выше на ES6
Стильно, модно. молодежно! (ES6). Без prototype и call и короче
let buttons = document.querySelectorAll('.btn');


buttons.forEach((elem)=>{
	elem.addEventListener('click',()=>{
      elem.parentNode.querySelector('.picture').classList.toggle('active')
  })
})
Ответ написан
Комментировать
rockon404
@rockon404
Frontend Developer
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы