本文介绍如何将单张图片的模态框预览逻辑扩展至页面中所有带 .tokenImage 类的图片，解决因 ID 唯一性导致的多图失效问题，并提供可复用、语义清晰的事件绑定方案。
本文介绍如何将单张图片的模态框预览逻辑扩展至页面中所有带 `.tokenimage` 类的图片，解决因 id 唯一性导致的多图失效问题，并提供可复用、语义清晰的事件绑定方案。
在原始代码中，开发者使用 document.getElementById("myImg") 绑定点击事件，这仅能匹配第一个且唯一具有该 ID 的元素（HTML 规范要求 ID 全局唯一）。而实际页面中存在多个商品卡片，每张卡片内的图片均使用相同类名 .tokenImage，但未设置 ID 或统一事件监听——因此只有首张图片可触发模态框，其余无效。
要实现“所有图片均可点击放大”，核心思路是：放弃依赖 ID 选择器，改用类名批量获取元素，并为每个图片单独绑定事件处理器。推荐使用 querySelectorAll() 配合 forEach() 迭代：
// 获取模态框及内部元素（保持不变）
const modal = document.getElementById("myModal");
const modalImg = document.getElementById("img01");
const captionText = document.getElementById("caption");
const closeBtn = document.querySelector(".close");
// ✅ 正确做法：为所有 .tokenImage 图片绑定点击事件
document.querySelectorAll(".tokenImage").forEach(img => {
img.addEventListener("click", function(e) {
modal.style.display = "block";
modalImg.src = this.src; // 或 e.target.src，效果一致
captionText.textContent = this.alt; // 使用 textContent 更安全（防 XSS）
});
});
// 关闭模态框（保持不变，但建议用 addEventListener）
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
});
// 点击模态框背景区域关闭（增强体验，可选）
modal.addEventListener("click", (e) => {
if (e.target === modal) {
modal.style.display = "none";
}
});
// 按 ESC 键关闭（提升可用性）
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && modal.style.display === "block") {
modal.style.display = "none";
}
});
⚠️ 关键注意事项：
-
切勿重复使用
id="myImg"：HTML 中多个元素共用同一 ID 属于无效标记，会导致getElementById行为不可预测，也违反可访问性（a11y）规范。应彻底移除所有id="myImg"，仅保留语义化类名（如.tokenImage）。 -
避免内联样式干扰：原 HTML 中部分
<img>标签含style="max-width:90%"，需确保模态框内图片能自适应（.modal-content已设width: 80%，通常足够）。若需强制等比缩放，可在 CSS 中补充：.modal-content { height: auto; max-height: 90vh; object-fit: contain; } -
移动端兼容优化：添加
touchstart事件可提升手机端响应速度（尤其 iOS Safari），可与click合并监听：img.addEventListener("click", handler); img.addEventListener("touchstart", handler); // handler 为同一函数
✅ 最终效果：任意卡片中的 .tokenImage 图片点击后，均能正确显示模态框，加载对应 src 与 alt 文字说明；关闭逻辑（X 按钮、背景点击、ESC 键）全局生效，结构清晰、无冗余 ID、符合现代 Web 开发最佳实践。
