Javascript 如何在类名上使用querySelectorAll

我正在努力使我的网站对手持设备的操作做出响应。我有四张图片，都是class=“grid photos”。我试图使照片在单击时展开，再次单击时关闭

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

我曾试过用querySelectorAll[我]，但没有用

---

感谢您的帮助

您选择了错误的选择器查询选择器仅选择1，

查询选择器全部

选择所有项目示例：

const gridPhotos=document.queryselectoral（“.grid photos”）；
gridPhotos.forEach（功能（项目）{
item.onclick=函数（）
{
this.classList.toggle（“扩展器”）；
};
});
问题在于变量
gridPhotos
是所有网格照片的集合。因此，当您在其上调用
.classList
时，您将得到一个未定义的错误

您需要的是从事件中获取正确的元素<代码>事件。目标

将返回单击的元素，以便您可以使用该元素将类添加到正确的图像中

document.queryselectoral（.grid photos”）.forEach（（项目）=>{
item.addEventListener（“单击”，（事件）=>{
event.target.classList.toggle（“扩展器”）；
});
});
.expander{
边框：4px纯绿色；/*添加以突出显示单击的对象*/
}

只需在
类列表
之前使用
项
或
事件.目标
而不是
网格照片
。这是否回答了您的问题？使用而不是分配多个事件 — 它更易于维护，并且适用于动态添加的元素。例如，使用an's。见和。
const gridPhotos = document.querySelector(".grid-photos");

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