如何在一个网页上制作多个图像加载到模态

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获取元素时，你只能检索1个元素，因为id是uniqe。你想要做的是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始终是唯一的，因此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";
    }