商品按钮关联礼品卡弹窗面额匹配异常技术咨询

原代码的问题在于点击按钮后会遍历所有商品链接，导致无法定位到当前点击按钮所属的商品。要实现精准匹配，核心是获取当前点击按钮对应的商品URL，再从中提取面额标识。

解决方案步骤： #

1. 点击按钮时，通过事件对象定位到当前按钮所属的商品容器（.product）
2. 在该容器内获取对应的商品链接，提取其中的nominal-xxx标识
3. 用提取到的标识匹配弹窗内的面额按钮，设置选中状态

修改后的代码： #

/*всплывающее окно*/
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');

        // 1. 获取当前点击按钮所属的商品容器
        const currentProduct = pb.closest('.product');
        if (!currentProduct) return; // 找不到容器则终止

        // 2. 从当前商品容器中获取商品链接
        const productLink = currentProduct.querySelector('a');
        if (!productLink) return;

        // 3. 从链接中提取nominal-xxx标识
        const matchedNominal = productLink.href.match(/nominal-\d+/);
        if (!matchedNominal) return;
        const targetNominal = matchedNominal[0];

        // 4. 处理弹窗内的面额按钮选中状态
        const nominals = document.querySelectorAll('.nominal-500, .nominal-1000, .nominal-1500, .nominal-2000, .nominal-2500, .nominal-3000, .nominal-3500, .nominal-4000, .nominal-5000, .nominal-7000, .nominal-8500, .nominal-10000');
        
        // 先移除所有选中状态
        nominals.forEach(nominal => nominal.classList.remove('active-nominal'));
        
        // 找到目标面额按钮并设置选中
        const targetBtn = document.querySelector(`.${targetNominal}`);
        if (targetBtn) {
            targetBtn.classList.add('active-nominal');
            targetBtn.click();
        }
    });
}

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 === popupClose) {
        popClose();
    }
}

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

关键修改说明： #

• 使用pb.closest('.product')精准定位当前按钮所属的商品容器，避免遍历所有商品
• 用正则表达式/nominal-\d+/从商品链接中提取面额标识，比手动遍历字段更灵活
• 先移除所有面额按钮的选中状态，再单独激活目标按钮，确保状态唯一

内容的提问来源于stack exchange，提问作者Лео