Как по клику на кнопку окрывать нужный попап ( класс в дата атрибуте)?

Question

[fantastikgodd]

класс для показа попапа - popup--active
https://jsfiddle.net/7xvabjuk/6/

Answer 1

[0xD34F]

const openSelector = '.block__item';
const closeSelector = '.close';
const itemSelector = '.popup';
const activeClass = 'popup--active';


// делегирование, общий обработчик клика - для открытия и закрытия сразу,
// назначается один раз для всех элементов;
// связь кнопок открытия попапов с попапами через data-атрибут
document.addEventListener('click', ({ target: t }) => {
  let item = t.closest(closeSelector)?.closest(itemSelector);
  if (!item) {
    const open = t.closest(openSelector);
    if (open) {
      item = document.querySelector(`${itemSelector}.${open.dataset.popup}`);
    }
  }

  item?.classList.toggle(activeClass);
});

// или, отдельные обработчики клика для открытия и закрытия,
// назначаются каждому элементу индивидуально;
// связь кнопок открытия попапов с попапами через индексы
const open = [...document.querySelectorAll(openSelector)];
const close = document.querySelectorAll(closeSelector);
const items = document.querySelectorAll(itemSelector);

const onOpenClick = e => items[open.indexOf(e.currentTarget)].classList.add(activeClass);
open.forEach(n => n.addEventListener('click', onOpenClick));

const onCloseClick = e => e.currentTarget.closest(itemSelector).classList.remove(activeClass);
close.forEach(n => n.addEventListener('click', onCloseClick));

Answer 2

[Steppp]

На нативном js так

const btn = document.querySelector(`button[data-popup="popup--corn"]`)
const popup = document.querySelector(`.popup`)
btn.addEventListener(`click`, function() {
  popup.classList.add(`popup--active`)
})

Comments

[fantastikgodd]

Steppp, нюанс в том, что попапов может быть не один

[Steppp]

fantastikgodd, Но это уже дублирование кода. А если будет 50 попапов, нужно оптимизировать такое))) делегирование гугли

const btnCorn = document.querySelector(`button[data-popup="popup--corn"]`)
const popupCorn = document.querySelector(`.popup--corn`)
btnCorn.addEventListener(`click`, function() {
  popupCorn.classList.add(`popup--active`)
})

const btnSunflower = document.querySelector(`button[data-popup="popup--sunflower"]`)
const popupSunflower = document.querySelector(`.popup--sunflower`)
btnSunflower.addEventListener(`click`, function() {
  popupSunflower.classList.add(`popup--active`)
})