当页面中存在多个相同结构的模态框时，若仅第一个可触发而其余失效，根本原因通常是重复使用了相同的 id 属性，以及事件监听器未正确绑定到所有对应元素上。
当页面中存在多个相同结构的模态框时，若仅第一个可触发而其余失效，根本原因通常是重复使用了相同的 `id` 属性，以及事件监听器未正确绑定到所有对应元素上。
在前端开发中，id 属性具有全局唯一性约束——整个 HTML 文档中，每个 id 值只能出现一次。而你在复制产品模块时，将 <button id="open-modal"></button> 和 <div id="modal-container"> 直接重复粘贴，导致多个同名 <code>id 共存。JavaScript 的 document.getElementById() 仅返回第一个匹配元素，因此 showModal("open-modal", "modal-container") 永远只作用于首个模态框，其余按钮点击无响应。
✅ 正确做法是：
- *移除硬编码
id，改用class或 `data-` 属性标识关系**； - 使用
querySelectorAll()批量获取所有触发按钮，并为每个按钮独立绑定事件； - 利用 DOM 遍历（如
closest()和querySelector()）动态定位其关联的模态容器，避免依赖全局唯一 ID。
以下是优化后的完整实现方案：
<!-- 单个产品模块（可无限复制） -->
<article class="product-card">
@@##@@
<div class="modal">
<button class="modal-button open-modal-btn">
<i class="ri-arrow-right-up-line"></i>
</button>
<div class="modal-container">
<div class="modal-content">
<div class="modal-close close-modal" title="close">
<i class="ri-close-line"></i>
</div>
@@##@@
</div>
</div>
</div>
<h3 class="products-name">Jackass Bitters</h3>
<span class="products-price">$10.00</span>
</article>
// ✅ 绑定所有打开按钮
document.querySelectorAll('.open-modal-btn').forEach(button => {
button.addEventListener('click', function() {
// 向上查找最近的 .product-card，再向下查找对应的 .modal-container
const modalContainer = this.closest('.product-card').querySelector('.modal-container');
if (modalContainer) {
modalContainer.classList.add('show-modal');
// 可选：阻止 body 滚动（提升体验）
document.body.style.overflow = 'hidden';
}
});
});
// ✅ 绑定所有关闭按钮（保持原有逻辑，已正确使用 querySelectorAll）
document.querySelectorAll('.close-modal').forEach(btn => {
btn.addEventListener('click', function() {
const modalContainer = this.closest('.modal-container');
if (modalContainer) {
modalContainer.classList.remove('show-modal');
document.body.style.overflow = '';
}
});
});
// ✅ 可选增强：点击遮罩层关闭（添加到 .modal-container 上）
document.querySelectorAll('.modal-container').forEach(container => {
container.addEventListener('click', function(e) {
if (e.target === this) {
this.classList.remove('show-modal');
document.body.style.overflow = '';
}
});
});
? 关键注意事项：
- ❌ 禁止在多个元素上复用相同
id（如id="open-modal"），这是 W3C 规范强制要求，也会影响无障碍访问（a11y）和 CSS 选择器可靠性； - ✅ 推荐使用语义化类名（如
.open-modal-btn）配合 DOM 关系定位，使结构更健壮、可维护性更强； - ⚠️ 若页面存在其他 JavaScript 错误（如滚动监听异常），务必先在浏览器控制台排查并修复，否则可能阻塞后续脚本执行；
- ? 进阶建议：可进一步封装为自定义元素（Custom Element）或使用轻量级模态管理器，实现复用与解耦。
通过以上重构，所有产品卡片的模态框均可独立、可靠地触发与关闭，且代码具备良好的扩展性与可读性。
