javascript - 带有 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>

标签： javascript

Answer 1

改变

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

至

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