如何实现所有商品卡片图片点击打开Modal弹窗？

问题根源 #

你的代码仅给唯一id为myImg的第一个图片绑定了点击事件，其余图片未绑定任何交互逻辑；同时HTML中id属性是唯一标识，不能重复使用在多个元素上，这就是只有第一个图片生效的核心原因。

修复步骤 #

1. 调整HTML结构

移除第一个图片的id="myImg"属性，所有商品卡片的图片统一使用已有的tokenImage类（无需新增类）。

2. 更新CSS样式

把原来针对#myImg的样式替换为.tokenImage，让所有图片都拥有悬停交互效果：

.tokenImage {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.tokenImage:hover {
  opacity: 0.7;
}

3. 修改JavaScript逻辑

获取所有带有tokenImage类的图片元素，通过循环给每个图片绑定点击事件：

// 获取模态框相关元素
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

// 获取所有商品图片
var imgs = document.getElementsByClassName("tokenImage");

// 循环给每个图片绑定点击事件
for (var i = 0; i < imgs.length; i++) {
  imgs[i].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  }
}

// 关闭模态框逻辑保持不变
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

4. 可选优化：点击背景关闭弹窗

如果需要点击模态框黑色背景也能关闭弹窗，可添加以下代码：

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

完整修改后的关键HTML片段 #

<div class="product-card-container">
  <div class="wrapper_div">
    <div class="nft">
      <div class='main'>
        <!-- 移除id="myImg"，仅保留tokenImage类 -->
        <img class='tokenImage' src="http://kartinkof.club/uploads/posts/2022-04/1649561882_6-kartinkof-club-p-ugarnie-kartinki-shrek-7.jpg" alt="Snow" style="width: 100%; max-width: 300px">
        <!-- 其余卡片内容保持不变 -->
      </div>
    </div>
  </div>
  <!-- 其余商品卡片结构无需修改，所有图片仅保留tokenImage类 -->
  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
  </div>
</div>

核心原理说明 #

• 使用类选择器替代id选择器：类属性可复用在多个元素上，能一次性选中所有商品图片。
• 循环绑定事件：遍历所有图片元素，给每个元素单独绑定点击逻辑，确保每个图片点击都能触发模态框显示。

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