如何实现点击三张图片分别唤起对应不同的Overlay画廊？

• 重复使用相同ID：HTML里多个元素用了overlay、expandedImg、imgtext这些重复ID，浏览器的getElementById只会返回第一个匹配的元素，导致所有点击都唤起第一个画廊。
• 点击事件无区分：原on()函数没有接收标识参数，无法判断要打开哪个画廊，只会固定触发第一个overlay。

HTML部分 #

给每个画廊、放大图、文本框设置唯一ID，同时给触发图片传递对应画廊的标识：

<div class="Galerie">
  <div class="column">
    <div style="padding:10px">
      <img src="img/A1.jpg" onclick="on('overlay-a')" alt="Snow" style="width: 100%;">
    </div>
  </div>
  <div class="column">
    <div style="padding:10px">
      <img src="img/B3.jpg" onclick="on('overlay-b')" alt="Forest" style="width:100%">
    </div>
  </div>
  <div class="column">
    <div style="padding:10px">
      <img src="img/C1.JPG" onclick="on('overlay-c')" alt="Mountains" style="width:100%">
    </div>
  </div>
</div>

<!-- 画廊A -->
<div id="overlay-a" class="overlay" ondblclick="off('overlay-a')">
  <div class="gallery-content">
    <div class="row">
      <div class="Reiheeins">
        <img src="img/A1.jpg" alt="Nature" style="width:100%" onclick="myFunction(this, 'expanded-a', 'text-a');">
      </div>
      <div class="Reiheeins">
        <img src="img/A2.jpg" alt="Snow" style="width:100%" onclick="myFunction(this, 'expanded-a', 'text-a');">
      </div>
      <div class="Reiheeins">
        <img src="img/A3.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this, 'expanded-a', 'text-a');">
      </div>
      <div class="Reiheeins">
        <img src="img/A4.jpg" alt="Lights" style="width:100%" onclick="myFunction(this, 'expanded-a', 'text-a');">
      </div>
    </div>

    <div class="container">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img id="expanded-a" style="width:100%">
      <div id="text-a"></div>
    </div>
  </div>
</div>

<!-- 画廊B -->
<div id="overlay-b" class="overlay" ondblclick="off('overlay-b')">
  <div class="gallery-content">
    <div class="row1">
      <div class="Reihezwei">
        <img src="img/B3.jpg" alt="Nature" style="width:100%" onclick="myFunction(this, 'expanded-b', 'text-b');">
      </div>
      <div class="Reihezwei">
        <img src="img/B4.jpg" alt="Snow" style="width:100%" onclick="myFunction(this, 'expanded-b', 'text-b');">
      </div>
      <div class="Reihezwei">
        <img src="img/B6.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this, 'expanded-b', 'text-b');">
      </div>
      <div class="Reihezwei">
        <img src="img/B2.jpg" alt="Lights" style="width:100%" onclick="myFunction(this, 'expanded-b', 'text-b');">
      </div>
    </div>

    <div class="container">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img id="expanded-b" style="width:100%">
      <div id="text-b"></div>
    </div>
  </div>
</div>

<!-- 画廊C -->
<div id="overlay-c" class="overlay" ondblclick="off('overlay-c')">
  <div class="gallery-content">
    <div class="row2">
      <div class="Reihedrei">
        <img src="img/C1.JPG" alt="Mountains" style="width:100%" onclick="myFunction(this, 'expanded-c', 'text-c');">
      </div>
      <!-- 补充C系列其他图片 -->
    </div>

    <div class="container">
      <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <img id="expanded-c" style="width:100%">
      <div id="text-c"></div>
    </div>
  </div>
</div>

CSS部分（补充默认隐藏样式） #

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  padding: 20px;
  box-sizing: border-box;
}
.gallery-content {
  max-width: 800px;
  margin: 0 auto;
}

JavaScript部分 #

修改函数接收ID参数，实现精准控制：

function on(overlayId) {
  document.getElementById(overlayId).style.display = "block";
}

function off(overlayId) {
  document.getElementById(overlayId).style.display = "none";
}

function myFunction(imgs, expandImgId, imgTextId) {
  var expandImg = document.getElementById(expandImgId);
  var imgText = document.getElementById(imgTextId);
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

• 所有元素ID唯一，避免浏览器获取元素时冲突。
• 点击函数通过ID参数指定操作对象，实现不同图片唤起对应画廊。
• 图片放大函数也绑定对应画廊的放大图和文本框，确保每个画廊操作独立。

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