Question

如何在类名上使用 querySelectorAll

2021-02-25

389

javascript html css

我正在尝试使我的网站响应手持设备的操作。我有四张图片，所有图片的 class="grid-photos"。我尝试让照片在单击时展开，再次单击时关闭。

        <div class="grid-container">
         <img class="grid-photos">
         <img class="grid-photos">
         <img class="grid-photos">
         <img class="grid-photos">

到目前为止，我只能使用此 Javascript 使其与第一张图片配合使用

const gridPhotos = document.querySelector(".grid-photos");

document.querySelectorAll(".grid-photos").forEach((item) => {
  item.addEventListener("click", (event) => {
    gridPhotos.classList.toggle("expander");
  });
});

我尝试过使用 [i] 的 querySelectorAll，但无济于事。

感谢您的帮助

Answer 1

问题是您的变量 gridPhotos 是所有网格照片的集合。因此，当您对其调用 .classList 时，您会收到有关其未定义的错误。

您需要做的是从事件中获取正确的元素。 event.target 将返回被单击的元素，因此您可以使用它为正确的图像添加类。

document.querySelectorAll(".grid-photos").forEach((item) => {
  item.addEventListener("click", (event) => {
    event.target.classList.toggle("expander");
  });
});

.expander {
  border: 4px solid green; /* Added to highlight which one was clicked */
}

<div class="grid-container">
  <img class="grid-photos" src="https://lh6.googleusercontent.com/-l7M0ldZDNZs/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rf7tyiXmVY3yNjeGjVZCZdKL2qObw/photo.jpg?sz=32">
  <img class="grid-photos" src="https://lh6.googleusercontent.com/-l7M0ldZDNZs/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rf7tyiXmVY3yNjeGjVZCZdKL2qObw/photo.jpg?sz=32">
  <img class="grid-photos" src="https://lh6.googleusercontent.com/-l7M0ldZDNZs/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rf7tyiXmVY3yNjeGjVZCZdKL2qObw/photo.jpg?sz=32">
  <img class="grid-photos" src="https://lh6.googleusercontent.com/-l7M0ldZDNZs/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rf7tyiXmVY3yNjeGjVZCZdKL2qObw/photo.jpg?sz=32">
</div>

Answer 2

您错误的选择器 querySelector 仅选择 1， querySelectorAll 选择所有项目例如：

const gridPhotos = document.querySelectorAll(".grid-photos");

gridPhotos.forEach(function (item) {
  item.onclick = function()
  {
    this.classList.toggle("expander");
  };
});

<div class="grid-container">
  <img class="grid-photos" src="https://via.placeholder.com/150">
  <img class="grid-photos" src="https://via.placeholder.com/150">
  <img class="grid-photos" src="https://via.placeholder.com/150">
</div>