多图片画廊循环仅处理首个元素组问题排查与修复求助

我正在搭建一个包含5个小型图片画廊的页面，每个画廊由若干缩略图和一张主图组成，点击缩略图可切换显示主图。尝试用for循环为所有画廊绑定点击事件，但仅第一个画廊生效，后续画廊无法实现缩略图切换主图功能。

我的画廊代码（展示两组） #

<p>Animals</p>
<img src="Images\\Sheltie Snow Day Art Print (7 x 7).png" id="main">
<div id="thumbnails">
<img src="Images\\Border Collie Art Print, (8 x 10) Dog Art.png">
<img src="Images/Border Collie ORIGINAL Folk Painting (8 x 8).png  ">
<img src="Images/Chickadees Chat ORIGINAL Mini Painting.png">
</div>

<p>Flowers</p>
<img src="Images\\Daisy Wildflower Abundance ORIGINAL Painting ( 7x7).png" id="main">
<div id="thumbnails">
<img src="Images/Wildflower Meadow Mini ORIGINAL Painting ( 7 x 7) Sunflower Landscape.png">
<img src="Images/wild flower (3) - Copy.png">
<img src="Images/Wildflower Meadow ORIGINAL Painting Mini Floral Landscap.png">
</div>

我的JavaScript循环代码 #

<script>
var thumbnails = document.getElementById("thumbnails")
var imgs = thumbnails.getElementsByTagName("img")
var main = document.getElementById("main")
var counter=0;


for(let i=0;i<imgs.length;i++){
let img=imgs[i]

img.addEventListener("click",function(){
main.src=this.src
})
}
</script>

问题原因 #

1. ID重复违反HTML规则：HTML中id属性必须全局唯一，你重复使用main和thumbnails，导致document.getElementById()只会返回第一个匹配的元素，后续画廊的主图和缩略图容器完全没被选中。
2. 事件绑定未覆盖所有画廊：原代码仅获取了第一个thumbnails容器内的图片，没有遍历所有画廊模块，自然不会给后续缩略图绑定切换事件。

修复方案 #

第一步：修改HTML结构（替换重复ID为Class，增加画廊容器） #

给每个画廊包裹独立容器，用class替代重复的id，确保每个模块的元素可被精准定位：

<div class="gallery">
  <p>Animals</p>
  <img src="Images\\Sheltie Snow Day Art Print (7 x 7).png" class="main">
  <div class="thumbnails">
    <img src="Images\\Border Collie Art Print, (8 x 10) Dog Art.png">
    <img src="Images/Border Collie ORIGINAL Folk Painting (8 x 8).png  ">
    <img src="Images/Chickadees Chat ORIGINAL Mini Painting.png">
  </div>
</div>

<div class="gallery">
  <p>Flowers</p>
  <img src="Images\\Daisy Wildflower Abundance ORIGINAL Painting ( 7x7).png" class="main">
  <div class="thumbnails">
    <img src="Images/Wildflower Meadow Mini ORIGINAL Painting ( 7 x 7) Sunflower Landscape.png">
    <img src="Images/wild flower (3) - Copy.png">
    <img src="Images/Wildflower Meadow ORIGINAL Painting Mini Floral Landscap.png">
  </div>
</div>

第二步：修改JavaScript代码（遍历所有画廊，独立绑定事件） #

以每个画廊容器为单位，分别绑定缩略图点击事件，确保点击缩略图时仅修改当前画廊的主图：

// 获取所有画廊容器
const galleries = document.querySelectorAll('.gallery');

galleries.forEach(gallery => {
  // 获取当前画廊的主图和所有缩略图
  const mainImg = gallery.querySelector('.main');
  const thumbImgs = gallery.querySelectorAll('.thumbnails img');
  
  // 给当前画廊的每个缩略图绑定点击事件
  thumbImgs.forEach(thumb => {
    thumb.addEventListener('click', function() {
      mainImg.src = this.src;
    });
  });
});

修复逻辑说明 #

• 用class替代重复id，符合HTML规范，同时支持批量选择元素。
• 以.gallery容器为独立单元处理，避免不同画廊间的元素干扰。
• 使用querySelectorAll和forEach遍历，代码简洁且自动覆盖所有画廊，无需手动计数循环。

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