JavaScript图片模态框适配相册多图的代码修改问题咨询

问题原因 #

你当前的代码存在两个核心错误导致功能失效：

• 语法错误：DOM 原生 API 不存在 getElementsByClass 方法，正确的方法名为 getElementsByClassName
• 逻辑错误：getElementsByClassName 返回的是类数组结构的 HTML 元素集合，不是单个 DOM 元素，无法直接给整个集合绑定点击事件，需要遍历集合内的每一张图片单独绑定监听

修正后JS代码 #

// 获取模态框元素
var modal = document.getElementById('myModal');
// 获取所有class为galleryPic的相册图片
var imgs = document.getElementsByClassName('galleryPic');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

// 遍历所有相册图片，逐个绑定点击触发逻辑
for (var i = 0; i < imgs.length; i++) {
  imgs[i].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
  }
}

// 获取关闭按钮
var span = document.getElementsByClassName("close")[0];
// 点击关闭按钮隐藏模态框
span.onclick = function() {
  modal.style.display = "none";
}

// 可选优化：点击模态框灰色背景区域也可关闭
modal.onclick = function(e) {
  if (e.target === modal) {
    modal.style.display = "none";
  }
}

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