多弹窗实现异常求助：三按钮仅单个弹窗可触发

核心问题是你在HTML里重复使用了相同的id属性（popup-open、popup-container、popup-close），而document.getElementById()只会返回页面中第一个匹配该id的元素，所以只有第一个按钮和弹窗能正常触发，其余的都没绑定事件。

不需要为每个弹窗写独立事件，只需做以下修改：

1. 替换重复id为class #

把HTML中所有重复的id改成class，确保每个元素的标识符合规范：

<div class="products-bar-container">
    <div class="products-bar-item">
        <!-- ... 其他内容 ... -->
        <div class="products-bar-item-button popup-open">Ver más</div>
        <div class="popup-container">
            <div class="popup">
                <!-- ... 弹窗内容 ... -->
                <button class="popup-close">X</button>
            </div>
        </div>
    </div>
    <!-- 另外两个item做同样修改，把id换成对应的class -->
</div>

2. 修改JavaScript代码 #

通过类选择器获取所有按钮，利用DOM的层级关系找到当前按钮对应的弹窗，批量绑定事件：

// 获取所有打开按钮
const openButtons = document.querySelectorAll('.popup-open');
// 获取所有关闭按钮
const closeButtons = document.querySelectorAll('.popup-close');

// 为每个打开按钮绑定点击事件
openButtons.forEach(button => {
    button.addEventListener('click', () => {
        // 找到当前按钮所在item里的弹窗容器
        const popupContainer = button.parentElement.querySelector('.popup-container');
        popupContainer.classList.add('show');
    });
});

// 为每个关闭按钮绑定点击事件
closeButtons.forEach(button => {
    button.addEventListener('click', () => {
        // 找到当前关闭按钮所在的弹窗容器
        const popupContainer = button.closest('.popup-container');
        popupContainer.classList.remove('show');
    });
});

原理说明 #

• querySelectorAll会返回所有匹配类选择器的元素，我们可以通过forEach遍历批量绑定事件
• parentElement和closest()方法可以帮我们精准定位到当前按钮对应的弹窗容器，避免混淆不同item里的弹窗
• 这种方式不需要为每个弹窗写独立的事件处理逻辑，代码更简洁易维护

内容的提问来源于stack exchange，提问作者Allie Vigo