JavaScript 中的模态图像问题

Question

我正在尝试将图像模式包含到我的照片库中。我一直在尝试使用此示例的一个版本：

http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/howto/howto_css_modal_images.asp.html

该示例仅适用于一张图片，因为它通过其 ID 访问该图片。我试图修改它，让它通过它的类访问图像。但这不起作用。我将如何修改 JS 代码以使其适用于画廊中的任何图像？

谢谢！！！

修改代码：

HTML：

<img class="galleryPic" src="assets/images/test images/globes.jpg" alt="Old globes" width="300" height="200">
<img class="galleryPic" src="assets/images/test images/palmtrees.jpg" alt="Palmtrees in front of the evening sky" width="300" height="200">

        <!-- The Modal -->
        <div id="myModal" class="modal">

            <!-- The Close Button -->
            <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
  
            <!-- Modal Content (The Image) -->
            <img class="modal-content" id="img01">
  
            <!-- Modal Caption (Image Text) -->
            <div id="caption"></div>
        </div>

JS：

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClass('galleryPic');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

Answer 1

没有document.getElementsByClass() 这样的东西，有document.getElementsByClassName()，如果找到它会返回一个元素列表。 所以你需要在列表中“循环”：

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var imgs = document.getElementsByClassName('galleryPic');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
for (let i = 0; i < imgs.length; i++) {
  imgs[i].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
  }
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

<img class="galleryPic" src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj" alt="Old globes" width="300" height="200">
<img class="galleryPic" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj" alt="Palmtrees in front of the evening sky" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>