javascript - Img 模态只打开第一个 img

Question

我试图在一个页面上列出多个图像，但当您单击图像时，它会以模式打开。

它适用于第一张图片，但不适用于其他图片，我假设这是一个 JS 问题，我尝试设置一个空的 var，然后将其设置为获取元素 ID(每个 img 都相同)，但仅再次第一个作品。

<?php foreach ($img as $thumbnail) {
  echo '<img id="myImg" src="'.$thumbnail.'" width="300" height="200">
    <div id="imgModal" class="modal">
      <span class="closeModal">&times;</span>
      <img class="modal-content" id="myImg1">
    <div id="caption"></div>
  </div>
  <span class="closeModal">&times;</span>';  
}
?>
<script>
  var modal = document.getElementById('imgModal');

  var img = document.getElementById('myImg');
  var modalImg = document.getElementById("myImg1");
  img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
  }

  var span = document.getElementsByClassName("closeModal")[0];

  span.onclick = function() {
    modal.style.display = "none";
  }
</script>

Answer 1

您的代码包含相同的 id 属性用于不同的元素，但 id必须是唯一的。

id属性指定 HTML 元素的唯一标识符，以便您可以通过 JS 或 CSS 对其进行操作。如果您使用相同的 id对于不同的元素，您只会获得页面上的第一个元素。

如果要为多个元素添加事件监听器，请添加 class给你的<img> :

echo '<img id="myImg" src="'.$thumbnail.'" width="300" height="200" class="modal-img">

然后为类为 modal-img 的每个元素添加事件监听器.