网格布局下多图片点击触发modal仅首张生效如何解决

架构老林

2026-10-1

问题修复方案

根因分析

HTML规范要求同一页面内id属性必须全局唯一，你给所有图片都设置了相同的id="modal"，document.getElementById()方法仅会返回页面中第一个匹配该id的元素，因此只有第一张图片成功绑定了点击事件，其余图片没有绑定事件所以点击无响应。
你原本给所有图片都设置了公共类名，应该使用类选择器选中全部图片再批量绑定事件。

修复代码

HTML调整

删除所有图片上重复的id属性，为了避免和弹窗本身的类名冲突，建议将触发元素的类名调整为modal-trigger，避免语义混淆：

<div class="row">
  <div class="col-4">
    <img src="Assets/Images/homepage-section-image.png" class="modal-trigger">
  </div>
  <div class="col-4">
    <img src="Assets/Images/homepage-section-image.png" class="modal-trigger">
  </div>
  <div class="col-4">
    <img src="Assets/Images/homepage-section-image.png" class="modal-trigger">
  </div>
  <div class="col-4">
    <img src="Assets/Images/homepage-section-image.png" class="modal-trigger">
  </div>
</div>

JS调整

使用querySelectorAll选中所有触发元素，遍历后逐一绑定点击事件：

// 选中所有class为modal-trigger的图片元素
const modalTriggers = document.querySelectorAll('.modal-trigger');
// 遍历所有元素逐一绑定点击事件
modalTriggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    document.getElementById("my_modal").style.display = "block";
  });
});