JavaScript模态getElementsByClassName

Question

然而，我正在构建一个基于W3S教程的模式，而不是获取一个"id“，我需要用一个”类“名称来获取多个图像。我使用了经典的for循环方法，然后添加了一个单击函数，该函数会弹出一个空框。

问题是，虽然出现了框和背景样式，但没有显示图像。在目标图像+不带for循环的情况下使用"id“可以很好地显示，但是在循环中添加"class”则不能。我在JS里漏掉了一些东西。任何帮助都将不胜感激。

​

let modal = document.getElementById("modal");
let imgs = document.getElementsByClassName("images");
let modalImg = document.getElementById("modal-img");

for (let i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener("click", () => {
    modal.style.display = "block";
    modalImg.src = this.src;
  });
}

.images {
  border-radius: 5px;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

<!-- target images -->
<div>
  <img src="https://via.placeholder.com/150?text=image1" alt="" class="images">
</div>
<div>
  <img src="https://via.placeholder.com/150?text=image2" alt="" class="images">
</div>
<!-- modal -->
<div id="modal" class="modal">
  <img class="modal-content" id="modal-img">
</div>

​

Answer 1

() =>不绑定它自己的this --您必须使用标准函数表达式将this绑定到正确的上下文(本例中的元素)

​

let modal = document.getElementById("modal");
let imgs = document.getElementsByClassName("images");
let modalImg = document.getElementById("modal-img");

for (let i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener("click", function () {
    modal.style.display = "block";
    modalImg.src = this.src;
  });
}

.images {
  border-radius: 5px;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

<div>
  <img src="https://placekitten.com/150?image=1" alt="" class="images">
</div>
<div>
  <img src="https://placekitten.com/150?image=2" alt="" class="images">
</div>

<div id="modal" class="modal">
  <img class="modal-content" id="modal-img">
</div>

​