模态图库(Modal Gallery)仅能打开列表最后一张图片如何解决

问题原因 #

你的代码问题出在点击事件的逻辑设计上：每次点击gallery区域时，代码都会遍历所有图库图片，依次把每张图的src和alt属性覆盖赋值给模态框元素，遍历结束后模态框里只会保留最后一张图的内容，所以不管点击哪张图，最终打开的都是最后一张。

修正方案 #

我们用事件委托的方式直接获取被点击的目标元素，不需要遍历所有图片，修改你的JS逻辑如下：

const modal = document.getElementById("myModal");
const modalImg = document.getElementById("img01");
const captionText = document.getElementById("caption");
const span = document.getElementsByClassName("close")[0];
const gallery = document.querySelector(".gallery")

gallery.addEventListener("click", (e) => {
    // 判断点击的目标是不是图库中的img元素
    const clickedImg = e.target.closest('.gallery li img');
    if (clickedImg) {
        modal.style.display = "block";
        modalImg.src = clickedImg.src;
        captionText.innerHTML = clickedImg.alt;
    }
})

span.onclick = function() {
    modal.style.display = "none";
}

// 可选优化：只在点击模态框黑色遮罩区域时关闭，点击图片/标题不关闭
modal.onclick = function(e) {
    if (e.target === modal) {
        modal.style.display = "none";
    }
}

说明 #

• 代码中用e.target获取触发点击事件的元素，再通过closest方法确认点击的是图库列表内的img元素，避免误触发
• 直接读取被点击图片的属性赋值给模态框，不会出现遍历覆盖的问题
• 可选优化的逻辑解决了原代码中点击模态框内的图片也会关闭模态框的问题，不需要可以直接保留原关闭逻辑

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