图片模态框将触发标识从ID改为Class后功能失效该如何排查？

问题根因 #

你代码的核心错误出在JavaScript的事件绑定语法上：addEventListener是DOM元素的方法，不是可赋值的属性，你错误添加了等号，导致事件监听根本没有注册成功，所以模态框无法触发。

修正方案 #

直接修改循环内的事件绑定代码，删除addEventListener后面的等号即可，优化后的完整JavaScript代码如下：

var modal = document.getElementById("myModal");
// 把modalImg和captionText的获取提到循环外，避免重复查询DOM提升性能
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

var imgs = document.getElementsByClassName("myImg");
for(var i=0; i<imgs.length; i++){
    // 这里去掉等号，改成调用addEventListener方法
    imgs[i].addEventListener('click', function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    })
}

var span = document.getElementsByClassName("close")[0];

document.addEventListener("keydown", function(event) {
    const key = event.key;
    if (key === "Escape") {
        modal.style.display = "none";
    }
})

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

额外优化建议 #

• 循环里不需要重复查询modalImg和captionText，提到循环外只查询一次即可，减少DOM操作开销
• 如果你的环境支持ES6+，可以把循环的var i改成let i，避免var变量提升带来的潜在闭包问题
• 可以给模态框本身增加点击关闭逻辑：点击模态框灰色背景区域也关闭，交互体验更好，代码如下：

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

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