Сопоставить ссылки в списке с кнопками

Рейтинг: 0Ответов: 1Опубликовано: 16.03.2023

Есть попап с формой для выбора нужного номинала подарочной карты со списком номиналов, на который тыкаешь, выбирается нужный номинал и дальше жмешь на кнопку и улетаешь на оплату. Есть список товаров списком с кнопкой Купить карту. Нужно чтобы при нажатии на кнопку на определенном товаре из списка открывалось окно где в форме уже выбран нужны номинал. Так как url каждого товара и кнопки выбора номинала в форме содержат одинаковые строки "nominal-{}" решил именно прошерстить все url в списке товаров и сопоставить их с кнопками.

 /*всплывающее окно*/
    const popup = document.querySelector('.popup');
    const popupOverlay = document.querySelector('.popup__overlay');
    const popupBtn = document.querySelectorAll('.popup-btn');
    const popupClose = document.querySelector('.popup__close');

    for (const pb of popupBtn) {
        pb.addEventListener('click', (e) => {
            e.preventDefault();
            document.body.classList.add('popup-open');

           // список того что будем искать
            var fields = [
                'nominal-500',
                'nominal-1000',
                'nominal-1500',
                'nominal-2000',
                'nominal-2500',
                'nominal-3000',
                'nominal-3500',
                'nominal-4000',
                'nominal-5000',
                'nominal-7000',
                'nominal-8500',
                'nominal-10000'
            ];

            var nominals = document.querySelectorAll(`.${fields.join(', .')}`);

            fields.forEach(field => {
                
                const products = document.querySelectorAll('.product a'); //перебираем ссылки
                
                products.forEach(product => {
                    if(product.href.indexOf(field) > -1) { // ищем нужную ссылку
                        nominals.forEach(nominal => {
                            nominal.classList.remove('active-nominal');
                            if (nominal.classList.contains(field) ) {
                                nominal.click();
                                nominal.classList.add('active-nominal');
                            }
                        })
                    }

                })
                
            });
        })
        
    }

    function popClose() {
        document.body.classList.remove('popup-open');
    }

    function popRemove(e) {
        if(e.code === "Escape" && document.body.classList.contains('popup-open') || e.target === popupOverlay || e.target === popupOverlay) {
            popClose();
        }
    }

    document.addEventListener('keydown', popRemove);
    popup.addEventListener('click', popRemove);
    popupClose.addEventListener('click', popClose);


Попап работает как надо. Не получается только адекватно сопоставить ссылку на товар в блоке которого нажали на кнопку и кнопки выбора номиналов в форме. Если законсолить, то выводит весь список url, а не конкретный. Что сделать нужно?

Ответы

▲ 0

Я добавил index к циклу кнопок открывающих попапы и подставил его в свой products. Так все получилось