Question

我的网页上有两张图片，我正在尝试将它们加载到全屏模式中。例如，单击第一个图像将全屏显示，关闭第一个图像，然后单击第二个图像将全屏显示。我可以将其用于单个图像，但是第二个图像将不会加载到模态中。我尝试将第二个图像id更改为myImg2和所有var，这允许第二个图像加载，但是模态不会关闭。我还应该发布CSS代码吗？

<img id="myImg" src="images/analysis.PNG" alt="" style="width:100%;max-width:400px"> 
<img id="myImg" src="images/design.PNG" alt="" style="width:100%;max-width:400px">    

    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" class="responsive" id="img01">
      <div id="caption"></div>
    </div>

  <script>
      // 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.getElementById('myImg');
            var modalImg = document.getElementById("img01");
            var captionText = document.getElementById("caption");

          img.onclick = function(){
          modal.style.display = "block";
          modalImg.src = this.src;
          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";
        }
  </script>

Answer 1

通过id获取元素时，由于id是唯一的，因此只能检索1个元素。您要做的是document.getElementByClassName()，因此可以按索引访问它。

<img class="myImg" src="images/analysis.PNG" alt="" style="width:100%;max-width:400px">
<img class="myImg" src="images/design.PNG" alt="" style="width:100%;max-width:400px">

<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" class="responsive" id="img01">
    <div id="caption"></div>
</div>

<script>
    // 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.getElementsByClassName('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    for(var i = 0;i<img.length;i++){
    img[i].onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        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";
    }
</script>

Answer 2

在您的示例中，两个图像具有相同的ID，这可能就是为什么您永远都不会进入第二个图像的原因。 Javascript将查询DOM并返回您在document.getElementById方法中提供的ID的第一个元素。

如果要查询许多元素，可以尝试document.querySelector并传入您喜欢的任何CSS选择器，例如类名等。但是在您的DOM中始终具有2个相同的ID是一个坏主意

Answer 3

按类别class="myImg"更改图像ID。在您的代码中，您使用的ID始终是唯一的，因此JavaScript仅获取ID为myImg的第一张图像。因此，它仅显示第一个图像的模型，而不显示第二个图像的模型。试试这个JavaScript代码。

  // 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.querySelectorAll('.myImg');
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");



     for(var i = 0;i<img.length;i++){
img[i].onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    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";
    }

如何使一个网页上的多个图像加载为模态

3 个答案: