JavaScript 中的模态图像问题

Posted 2023-05-08

【中文标题】JavaScript 中的模态图像问题

【英文标题】：Modal Image Issue in JavaScript

【发布时间】：2021-09-19 10:50:46

【问题描述】：

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

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"   >
<img class="galleryPic" src="assets/images/test images/palmtrees.jpg"   >

        <!-- 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";

【问题讨论】：

请先显示您修改后的代码。

@vanowm 啊，好电话！更新。谢谢。

【参考方案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"   >
<img class="galleryPic" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj"   >

<!-- 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>

【讨论】：

天啊，当然！这就是我永远盯着它的结果。但是，我不会记得循环浏览它。所以，非常感谢你！