本文讲解如何将单张图片的模态框（Modal）查看功能扩展至页面中所有带 .tokenImage 类的图片，解决因重复使用 id="myImg" 导致仅首张图生效的问题。核心是改用类选择器 + forEach 批量绑定事件，确保每张卡片图片均可独立触发高清预览。
本文讲解如何将单张图片的模态框（modal）查看功能扩展至页面中所有带 `.tokenimage` 类的图片，解决因重复使用 `id="myimg"` 导致仅首张图生效的问题。核心是改用类选择器 + `foreach` 批量绑定事件，确保每张卡片图片均可独立触发高清预览。
在原始代码中，开发者通过 document.getElementById("myImg") 仅获取了第一个具有该 ID 的图片元素，并为其绑定点击事件——这违反了 HTML 中 id 属性必须唯一的原则，也导致后续卡片中的图片无法响应点击。
要让所有 .tokenImage 图片（即每个 NFT 卡片中的缩略图）都能打开模态框，需改用类选择器批量操作。以下是优化后的 JavaScript 核心逻辑：
// 获取模态框及相关元素（保持不变）
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 更安全
});
});
// ✅ 推荐：使用事件委托优化性能（尤其适用于动态添加的卡片）
// document.querySelector(".product-card-container").addEventListener("click", function(e) {
// if (e.target.classList.contains("tokenImage")) {
// modal.style.display = "block";
// modalImg.src = e.target.src;
// captionText.textContent = e.target.alt;
// }
// });
// 关闭模态框（保持不变，但建议用 addEventListener）
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
});
// 点击背景区域关闭模态框（增强用户体验）
window.addEventListener("click", (e) => {
if (e.target === modal) {
modal.style.display = "none";
}
});
⚠️ 关键注意事项：
-
移除所有
id="myImg"：HTML 中多个相同id会导致getElementById行为不可靠，应彻底删除或改为class="tokenImage"（当前已合理使用）。 -
避免内联样式干扰：确保
.tokenImage图片未被父容器overflow: hidden截断，否则模态框可能显示异常。 -
移动端适配：已在 CSS 中包含
@media响应式规则，确保小屏下图片宽度自适应（width: 100%），无需额外调整。 -
可访问性增强：为图片添加
alt描述（当前已有），并考虑为模态框添加role="dialog"和焦点管理（进阶需求）。
最终效果：任意卡片中的图片点击后，均能正确加载自身 src 和 alt，并在居中模态框中平滑缩放展示，关闭逻辑（X 按钮、点击遮罩层）全局生效。该方案结构清晰、可维护性强，是多图模态预览的标准实践。
