纯 JavaScript 模态图像的问题

Question

I have a problem with modal popup images. I have a list of images and tried to use this code (with some changes): https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img But it works only for the first message. How can I make it work for all messages from the gallery?

<div>
           <div class="portfolio-overlay">
                <img src="img/portfolio/Transeco-small.jpg">
                <div class="portfolio-image-overlay image-overlay-content">
                    <div class="portfolio-icons">
                         <i class="icon-zoom-in open-big"><img src="img/portfolio/Transeco-big.jpg" class="img-closed"></i>                          
                        <a href="http://www.google.com" target="_blank"><i class="icon-link"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div>
           <div class="portfolio-overlay">
                <img src="img/portfolio/Transeco-small.jpg">
                <div class="portfolio-image-overlay image-overlay-content">
                    <div class="portfolio-icons">
                         <i class="icon-zoom-in open-big"><img src="img/portfolio/Transeco-big.jpg" class="img-closed"></i>                          
                        <a href="http://www.google.com" target="_blank"><i class="icon-link"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div>
           <div class="portfolio-overlay">
                <img src="img/portfolio/Transeco-small.jpg">
                <div class="portfolio-image-overlay image-overlay-content">
                    <div class="portfolio-icons">
                         <i class="icon-zoom-in open-big"><img src="img/portfolio/Transeco-big.jpg" class="img-closed"></i>                          
                        <a href="http://www.google.com" target="_blank"><i class="icon-link"></i></a>
                    </div>
                </div>
            </div>
        </div>
<!-- The Modal -->
        <div class="modal myModal">
          <span class="close">&times;</span>
          <img class="modal-content img01">
        </div>


// Get the modal
var modal = document.querySelector(".myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.querySelector('.open-big');
var modalImg = document.querySelector(".img01");
var probaa = document.querySelector('.open-big img');
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = probaa.src;
}

// 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";
}

There are no errors in console, but it works only on firs image...

Answer 1

var img = document.querySelector('.open-big');

document.querySelector only selects a single element, in this case the first element with the class open-big

in order to select all elements you must use document.querySelectorAll

then you can iterate over that set an add event listeners to each one:

var imgs = document.querySelectorAll('.open-big');

for (i = 0; i < imgs.length; ++i) {
  imgs[i].onclick = function(){
    modal.style.display = "block";
    modalImg.src = probaa.src;
  }
}

you CANNOT use normal array methods on a node collection though. so, imgs.forEach will not work. There is a somewhere complicated workaround though:

[].forEach.call(imgs, function(img) {
  // do whatever
});

There is more information at this link on css tricks.