单页多独立图片画廊实现问题：缩略图点击无法对应各自放大区

问题根源 #

1. HTML中重复使用相同ID（expandedImg、imgtext），浏览器仅能识别第一个ID元素，导致所有缩略图点击后都修改第一个放大区内容。
2. 原JS使用getElementsByClassName时，直接对返回的类数组对象操作.src，但getElementsByClassName返回的是HTMLCollection集合，不能直接访问单个元素的属性。
3. 未建立缩略图与所属画廊放大区的关联，全局查找元素导致错位。

修复步骤 #

1. 重构HTML结构，给每个画廊添加独立容器 #

把每个项目的缩略图行（.row）和对应的放大容器（.container）包裹在一个独立的.gallery容器中，同时把重复的ID替换成class：

<!-- 单个画廊模块示例 -->
<div class="gallery">
  <div class="row">
    <h3> Science Magazine</h3>
    <div class="column">
      <img src="img/Portfolio/magazine/magazine.jpg" alt="Front cover and first two pages of a magazine assignment I created in some of my earlier quarters in college. It is not based on a real company or magazine." onclick="myFunction(this);" class="expandingimgs">
    </div>
    <div class="column">
      <img src="img/Portfolio/magazine/middle pages.jpg" alt="Content in this magazine was reseached and typed out by me. Science is another thing I am passionate about outside of college, so getting the oppertunity to create this was fun for me." onclick="myFunction(this);" class="expandingimgs">
    </div>
    <div class="column">
      <img src="img/Portfolio/magazine/Magazine back.jpg" alt="My images are not original, but still I am proud of this piece." onclick="myFunction(this);" class="expandingimgs">
    </div>
  </div>
  <hr>
  <div class="container">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img class="expandedImg" style="width:100%" alt="">
    <div class="imgtext"></div>
  </div>
</div>

（所有画廊都按这个结构修改，替换原有的.row+.container组合）

2. 修改JavaScript逻辑，关联缩略图与所属画廊 #

点击缩略图时，先向上查找它所在的.gallery容器，再在这个容器内找到对应的放大图和文本元素，确保操作的是当前画廊的专属区域：

function myFunction(imgs) {
  // 找到当前缩略图所属的画廊容器
  const gallery = imgs.closest('.gallery');
  // 在当前画廊内找放大图和文本元素
  const expandImg = gallery.querySelector('.expandedImg');
  const imgText = gallery.querySelector('.imgtext');

  // 更新内容
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  // 显示当前画廊的放大容器
  expandImg.parentElement.style.display = "block";
}

关键说明 #

• 使用closest('.gallery')：从当前元素向上查找最近的.gallery父容器，精准锁定当前缩略图所属的画廊。
• 使用querySelector在画廊内查找元素：避免全局查找导致的元素混淆，确保每个操作都只作用于当前画廊的组件。
• 统一使用class而非重复ID：符合HTML规范，同时保证样式和脚本的可复用性。

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