MDN图片画廊任务：用JS将对象文本写入img的alt属性

问题根源 #

你遇到的alt文本重复问题，基本是循环变量作用域错误（比如用var声明循环变量），或是没有根据当前图片文件名正确匹配对应Object里的alt值，导致所有缩略图都绑定了最后一个元素的alt文本。

完整实现代码 #

HTML结构

<div class="gallery">
  <div class="full-img">
    <img src="pic1.jpg" alt="日出时分的金门大桥" class="displayed-img">
    <button class="dark-btn">切换明暗</button>
  </div>
  <div class="thumb-bar"></div>
</div>

CSS样式

.gallery {
  width: 600px;
  margin: 2rem auto;
}

.full-img {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.displayed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.dark-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.thumb-bar {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}

.thumb-bar img {
  width: calc(20% - 3.2px);
  height: 80px;
  object-fit: cover;
  cursor: pointer;
}

.displayed-img.dark {
  filter: brightness(30%);
}

JavaScript逻辑

// 1. 声明图片文件名数组
const imageFiles = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg', 'pic5.jpg'];

// 2. 存储图片alt文本的Object（键为文件名，值为对应alt）
const imageAlts = {
  'pic1.jpg': '日出时分的金门大桥',
  'pic2.jpg': '山间溪流与光滑岩石',
  'pic3.jpg': '秋季漫山的红色枫叶林',
  'pic4.jpg': '海边矗立的白色灯塔',
  'pic5.jpg': '雪山脚下的蓝色湖泊'
};

const thumbBar = document.querySelector('.thumb-bar');
const displayedImg = document.querySelector('.displayed-img');
const darkBtn = document.querySelector('.dark-btn');

// 3. 循环生成带对应alt的缩略图
imageFiles.forEach(fileName => {
  const thumbImg = document.createElement('img');
  thumbImg.src = fileName;
  // 关键：根据当前文件名匹配Object中的alt值
  thumbImg.alt = imageAlts[fileName];
  thumbBar.appendChild(thumbImg);

  // 4. 点击缩略图切换大图及alt
  thumbImg.addEventListener('click', () => {
    displayedImg.src = fileName;
    displayedImg.alt = imageAlts[fileName];
  });
});

// 5. 按钮控制大图明暗
darkBtn.addEventListener('click', () => {
  displayedImg.classList.toggle('dark');
});

问题解决关键点 #

1. 使用块级作用域的循环变量：用forEach循环或带let的普通for循环，避免var导致的变量泄漏问题——每个迭代的文件名都是独立的，不会出现所有缩略图共享最后一个值的情况。如果用普通for循环，写法如下：

for (let i = 0; i < imageFiles.length; i++) {
  const fileName = imageFiles[i];
  // 后续逻辑与forEach一致
}

2. 严格匹配文件名与Object键：确保imageAlts的键和imageFiles里的文件名完全一致，这样imageAlts[fileName]才能精准拿到对应alt文本，而非错误引用固定键值。

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