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));
