尝试让 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() {&nbsp;&nbsp; &nbsp; &nbsp; var modal = document.getElementById('myModal');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; var imgs = document.querySelectorAll('.myImg');&nbsp; &nbsp; &nbsp; var modalImg = document.getElementById("img01");&nbsp; &nbsp; &nbsp; var captionText = document.getElementById("caption");imgs.forEach(function(img){&nbsp; &nbsp; &nbsp; img.onclick = function() {&nbsp; &nbsp; &nbsp; &nbsp; modal.style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; modalImg.src = this.src;&nbsp; &nbsp; &nbsp; &nbsp; captionText.innerHTML = this.alt;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; var span = document.getElementsByClassName("close")[0];&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; span.onclick = function() {&nbsp; &nbsp; &nbsp; &nbsp; modal.style.display = "none";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }

Answer 2

每个元素的属性 ID 都是唯一的。而 document.getElementById 将只选择文档中存在的第一个元素。var lightboxes = document.querySelectorAll('.lightbox');function lightboxModal(e) {&nbsp;const src = e.target.getAttribute('src');&nbsp;//do your modal here}lightboxes.forEach((el) => {&nbsp; 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

你在哪里&nbsp; img.onclick = function() {&nbsp; &nbsp; modal.style.display = "block";&nbsp; &nbsp; modalImg.src = this.src;&nbsp; &nbsp; captionText.innerHTML = this.alt;&nbsp; }您现在需要添加所有图像，所以var fullSizeFunc = function(e) {&nbsp; &nbsp; model.style.display = "block";&nbsp; &nbsp; modalImg.src = this.src;&nbsp; &nbsp; captionText.innerHTML = this.alt;}document.querySelectorAll("IMG").forEach(function(i, val) {&nbsp; this.addEventListener("click", fullSizeFunc);});