尝试让 JavaScript 在单击时使图像变大，仅适用于第一张图像

Question

我正在尝试制作一个画廊，您可以在其中单击每个图像以放大。最终我会对画廊进行风格化，但现在我只是想让图像发挥作用。我从 Stack Overflow 上的另一个用户那里复制了这段代码，回答了一个与我类似的问题，但我似乎无法让 JS 除了第一张图片之外的其他功能。#myImg:hover {  opacity: 0.7;}.modal {  display: none;  position: fixed;  z-index: 1;  padding-top: 100px;  left: 0;  top: 0;  width: 100%;  height: 100%;  overflow: auto;  background-color: rgb(0, 0, 0);  background-color: rgba(255, 148, 195, 0.9);}.modal-content {  margin: auto;  display: block;  width: 80%;  max-width: 700px;}#caption {  margin: auto;  display: block;  width: 80%;  max-width: 700px;  text-align: center;  color: #ccc;  padding: 10px 0;  height: 150px;}.modal-content,#caption {  -webkit-animation-name: zoom;  -webkit-animation-duration: 0.6s;  animation-name: zoom;  animation-duration: 0.6s;}@-webkit-keyframes zoom {  from {    -webkit-transform: scale(0);  }  to {    -webkit-transform: scale(1);  }}@keyframes zoom {  from {    transform: scale(0.1);  }  to {    transform: scale(1);  }}.close {  position: absolute;  top: 15px;  right: 35px;  color: #f1f1f1;  font-size: 40px;  font-weight: bold;  transition: 0.3s;}<img id="myImg" style="width: 200px; height: 184px;" src="ta-cards.svg" alt="Business Card Design"><div id="myModal" class="modal">  <span class="close">×</span>  <img src="ta-cards.svg" class="modal-content" id="img01">  <div id="caption"></div></div>      <img id="myImg" style="width: 200px; height: 184px;" src="talogos.svg" alt="Image_wallpaper"><div id="myModal" class="modal">  <span class="close">×</span>  <img src="talogos.svg" class="modal-content" id="img01">  <div id="caption"></div></div>window.onload = function() {   var modal = document.getElementById('myModal');  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;  }我究竟做错了什么？？

Answer 1

ID 必须是唯一的，不能重复。

更改：id="myImg"至class="myImg"

更改：#myImg:hover至.myImg:hover

新的 javascript，循环遍历图像

window.onload = function() { 

      var modal = document.getElementById('myModal');

    

      var imgs = document.querySelectorAll('.myImg');

      var modalImg = document.getElementById("img01");

      var captionText = document.getElementById("caption");

imgs.forEach(function(img){

      img.onclick = function() {

        modal.style.display = "block";

        modalImg.src = this.src;

        captionText.innerHTML = this.alt;

      }

    });

      var span = document.getElementsByClassName("close")[0];

    

      span.onclick = function() {

        modal.style.display = "none";

      }

    }

Answer 2

每个元素的属性 ID 都是唯一的。而 document.getElementById 将只选择文档中存在的第一个元素。

var lightboxes = document.querySelectorAll('.lightbox');

function lightboxModal(e) {

 const src = e.target.getAttribute('src');

 //do your modal here

}

lightboxes.forEach((el) => {

  el.addEventListener('click', lightboxModal);

});

<img src="https://randomwordgenerator.com/img/picture-generator/53e2d0464f5baf14f1dc8460962e33791c3ad6e04e507440742a7ad59f49c3_640.jpg" class="lightbox" />

<img src="https://picsum.photos/536/354" class="lightbox" />

Answer 3

你在哪里

  img.onclick = function() {

    modal.style.display = "block";

    modalImg.src = this.src;

    captionText.innerHTML = this.alt;

  }

您现在需要添加所有图像，所以

var fullSizeFunc = function(e) {

    model.style.display = "block";

    modalImg.src = this.src;

    captionText.innerHTML = this.alt;

}

document.querySelectorAll("IMG").forEach(function(i, val) {

  this.addEventListener("click", fullSizeFunc);

});