Masonry瀑布流点击图片打开Modal模态框多图生效问题求助

问题根源 #

HTML 规范要求 id 属性在整个页面中必须唯一，document.getElementById() 只会返回页面中第一个匹配对应 id 的元素，因此你给多张图片设置相同 myImg id 时，点击事件只会绑定到第一张图片上，其余图片自然无法触发模态框。

解决方案 #

第一步：修改HTML，给所有需要触发模态框的图片添加统一类名 #

删掉所有图片上重复的 id="myImg"，给每张瀑布流图片加统一的类，比如 class="masonry-img"，修改后HTML片段如下：

<div class="P-portfolio-masonry-cont cont-1400 m-a mb-125">
  <div class="P-portfolio-m-c-foto">
    <img class="masonry-img" src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="masonry-img" src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="masonry-img" src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="masonry-img" src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="masonry-img" src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
</div>

模态框部分的HTML不需要修改。

第二步：修改JS代码，批量给所有图片绑定点击事件 #

原来只获取单个img的逻辑改成获取所有带 .masonry-img 类的元素，循环绑定点击事件，修改后JS代码如下：

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

// 获取所有瀑布流图片，批量绑定点击事件
var imgList = document.querySelectorAll(".masonry-img");
imgList.forEach(function(img) {
  img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  }
});

// 点击叉关闭模态框
span.onclick = function() {
  modal.style.display = "none";
}

// 可选补充：点击模态框背景也可以关闭
modal.onclick = function(e) {
  if(e.target === modal) {
    modal.style.display = "none";
  }
}

修改后所有瀑布流图片点击都能正常唤起模态框，自动加载对应图片的地址和alt说明。

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