Делегирование/функция Js popup

Question

const closeMenu = () => {
    const closeBtn = document.querySelector('.close_icon'),
    overlay = document.querySelector('.overlay'),
    popup = document.querySelector('.popup');
    popup.addEventListener('click', (el) => {
        if (el.target === closeBtn) {
            popup.style.display = 'none';
        }
        if (el.target === overlay) {
            popup.style.display = 'none';
        }
    });
};

На странице есть 4 popup(.popup). У каждого есть кнопка "закрыть" (.close_icon), "подложка"(.overlay). Хотел код без дублирования, но что-то не выходит. Находит только 1ый popup, на остальные не работает(подключал ко всем). Проект разбит с помощью webpack по модулям. Что должен код: открываю модальное окно, при клике на подложку - закрывается. При клике на крестик - закрывается.

Answer 1

Так конечно у тебя не будет работать этот код для остальных блоков, только для первого. Тебе нужно передавать в функцию аргумент. Вот так:

const closeMenu = (el) => {
    const closeBtn = el.querySelector('.close_icon'),
    overlay = el.querySelector('.overlay'),
    popup = el.querySelector('.popup');
    popup.addEventListener('click', (el) => {
        if (el.target === closeBtn) {
            popup.style.display = 'none';
        }
        if (el.target === overlay) {
            popup.style.display = 'none';
        }
    });
};

То есть проблема в том, что ты ищешь элементы close_icon,overlay,popup во всем документе, а так как у тебя их несколько, то он будет выбирать первый, остальные не будет брать. Поэтому нужно передать аргумент

БЛОГ НА HUSL

Делегирование/функция Js popup

Ответы (1 шт):