JS图片库

Question

我已经使用模态制作了一个图片库，因此当我单击任何图像时都会以模态打开它，但是存在一个问题，我不知道为什么它不起作用，任何人都可以看看下面的代码并尝试帮我？ 我认为JavaScript代码还可以，但是我不确定，因为Console.log中没有显示任何错误。

 let modal = document.querySelector('.modal'); let images = document.querySelector('img'); let modalImg = document.getElementById('img01'); for (let i = 0; i < images.length; i++) { let img = images[i]; img.onclick = function(evt) { modal.style.display = 'block'; modalImg.src = this.src; } } 

 .container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 4px; align-items: center; padding-left: 330px; } .grids2{ grid-column: 2; grid-row: 2; } .grids3{ grid-column: 2; grid-row: 2/1; } .grids4{ grid-column: 1; grid-row: 2; } .grids5{ grid-column: 2; grid-row: 2; } img{ width: 410px; height: 290px; cursor: pointer; } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /*End of Slideshow*/ 

  <div class="container"> <div class="grid2s"> <img src="https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/62012-istock-833768276.jpg?itok=AvAKdWF_&resize=1100x1100"> </div> <div class="grids3"> <img src="http://mymodernmet.com/wp/wp-content/uploads/2017/01/animal-selfies-thumbnail.jpg"> </div> <div class="grids4"> <img src="https://ichef.bbci.co.uk/images/ic/976x549/p04f5x5v.jpg"> </div> <div class="grids5"> <img src="https://csnaps.org/wp-content/uploads/2017/06/animals-duck-header.jpg"> </div> </div> <div class="modal"> <img class="modal-content" id="img01"> </div> 

Answer 1

更改

let images = document.querySelector('img');

至

let images = document.getElementsByTagName('img');