模态图片多实例故障求助：多图用class后点击无响应

嗨，我一眼就看出问题所在啦！你把ID换成class后，用document.getElementsByClassName("zdjecie")拿到的不是单个图片元素，而是一个HTMLCollection（元素集合）——这是一组符合条件的DOM元素，你直接给这个集合绑定onclick事件肯定没用，因为集合本身没有这个属性，得给集合里的每一张图片单独绑定点击事件才行。

原来用ID的时候是单个元素，所以img.onclick能正常工作，但换成class多图场景就不行了。下面是修正后的完整代码：

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

// 获取所有带zdjecie类的图片
var imgs = document.getElementsByClassName("zdjecie");

// 遍历每一张图片，绑定点击事件
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";
}

关键改动说明： #

• 把变量名从img改成imgs（只是语义化调整，方便区分是多个元素）
• 用for循环遍历imgs集合，给每个imgs[i]单独绑定onclick事件
• 循环里的this会指向当前被点击的那张图片，所以能正确获取它的src和alt

另外还要提醒你一个小细节：确保这段脚本是在DOM加载完成后执行的，比如把脚本放在HTML的</body>标签前面，或者用DOMContentLoaded事件包裹，不然可能会出现获取不到元素的情况：

document.addEventListener('DOMContentLoaded', function() {
  // 上面的所有代码放在这里
});

这样修改后，点击任意一张带zdjecie类的图片，都能正常触发模态框放大啦！

内容的提问来源于stack exchange，提问作者Dominik Śliwiński