Bootstrap 4点击切换图片时alt标题不更新问题求助

你的问题出在nextImage函数仅更新了大图的地址和索引，没有同步更新标题区域和大图自身的alt属性，导致切换图片后标题不变化。

修改后的nextImage函数 #

const nextImage = (img) => {
  const current = +img.getAttribute('currentimage');
  if (current < imagesArr.length - 1) {
    const nextIndex = current + 1;
    // 更新大图地址
    img.src = imagesArr[nextIndex].image;
    // 更新大图的alt属性
    img.alt = imagesArr[nextIndex].alt;
    // 更新当前图片索引
    img.setAttribute('currentimage', nextIndex);
    // 更新下方标题内容
    const imgText = document.getElementById("imgtext");
    imgText.innerHTML = imagesArr[nextIndex].alt;
  }
}

关键修改点 #

• 计算nextIndex避免重复调用数组，提升代码可读性
• 同步更新大图的alt属性，保证图片语义正确
• 主动获取标题容器imgtext，将内容替换为下一张图片的alt文本

可选优化：初始化大图状态 #

页面初始加载时，大图没有设置currentimage属性和对应标题，建议在DOMContentLoaded回调里补充初始化逻辑：

document.addEventListener("DOMContentLoaded", function() {
  console.log('Loaded')

  const container = document.querySelector('.thumbnailContainer');
  container.innerHTML = createImages(imagesArr);

  // 初始化大图的索引和标题
  const expandImg = document.getElementById("expandedImg");
  const imgText = document.getElementById("imgtext");
  expandImg.setAttribute("currentimage", 0);
  expandImg.alt = imagesArr[0].alt;
  imgText.innerHTML = imagesArr[0].alt;
});

这样初始状态下标题也会显示第一张图片的alt内容，而非默认的"CAPTION"。

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