如何正确应用Javascript？

基本上，有四个容器，每个容器包含一个图像，我添加了一个脚本，可以查看完整的图像。但此函数仅适用于第一个容器

const img = document.querySelector("img");
const icons = document.querySelector(".icons");
img.onclick = function(){
    this.classList.toggle("active");
    icons.classList.toggle("active");
}

Html:

杰弗里
年龄|城市、国家

用户界面设计器和前端开发人员

消息
下列的

更新的HTML（1），一些细节；我更改了每个容器和包装器的名称，为每个新容器和包装器创建了不同的CSS文件，但不起作用，下面是新更新的html的一部分：

    <div class="container3">
      <div class="wrapper3">
        <a href="#">
          <img src="https://www.flaticon.com/premium-icon/icons/svg/3007/3007960.svg" alt="">
        </a>
        <div class="title">
  Name</div>
<div class="place">
  Age | City, Country</div>
</div>
<div class="content">
        <p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
          <div class="btn">
            <button>Message</button>
          </div>
<div class="btn">
            <button>Following</button>
          </div>
</div>
</div>
<div class="icons">
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
</div>
</div>
<script>
      const images = [...document.querySelectorAll(".wrapper img, .wrapper1 img, .wrapper2 img, .wrapper3 img")];

images.forEach(img => {
  img.addEventListener("click", function() {
    images
      .filter(img => img !== this)
      .forEach(img => img.classList.remove("active"));

    this.classList.toggle("active");
    </script>

名称
年龄|城市、国家

用户界面设计器和前端开发人员

消息
下列的



const images=[…document.queryselectoral（“.wrapper-img、.wrapper-1-img、.wrapper-2-img、.wrapper-3-img”）；
images.forEach（img=>{
img.addEventListener（“单击”，函数（）{
图像
.filter（img=>img！==this）
.forEach（img=>img.classList.remove（“活动”）；
this.classList.toggle（“活动”）；

您需要queryselectoral和for循环。 尝试：

const img=document.queryselectoral（“img”）；
对于（变量i=0；i

根据您的喜好修改此内容。玩得开心…

const images=[…document.queryselectoral（“.images-2 img，.images img”）；
images.forEach（img=>{
img.addEventListener（“单击”，函数（）{
图像
.filter（img=>img！==this）
.forEach（img=>img.classList.remove（“活动”）；
this.classList.toggle（“活动”）；
});
})；

.images，
.图片-2{
显示器：flex；
柔性包装：包装；
对正内容：空间均匀；
}
.images-2img，
.图像img{
框大小：边框框；
宽度：200px；
高度：100px；
对象匹配：覆盖；
对象位置：中心；
边缘底部：1rem；
过渡：所有250ms线性；
光标：指针；
}
.图像-2图像激活，
.图像img.active{
转换：比例（1.2）；
盒影：0px 10px 25px-10px#333；
}

.querySelector（）

返回第一个匹配的元素。使用

.querySelectorAll（）

尝试使用querySelectorAll还不起作用。你能提供你的HTML吗？不，但我尝试在每次之后插入脚本，但它也不起作用。来自

的
节点列表
。querySelectorAll（）
提供了一个
.forEach（）
method这意味着对象的所有者。在本例中，这将指向您单击它的img。来自
.queryselectoral（）
的
节点列表提供了一个
.forEach（）
methodTrue。但是也需要
filter
方法。我创建了4个不同名称的容器和包装器，我为不同的包装器和容器创建了额外的CSS文件，用以下开头应用脚本：const images=[…document.queryselectoral（“.wrapper img，.wrapper 1 img，.wrapper 2 img，.wrapper 3 img”）]；请更新您的问题（源代码）。这样我就可以清楚地看到哪里出了问题。查看帖子。
const img = document.querySelectorAll("img");
    
for (var i = 0; i < img.length; i++) {
img[i].addEventListener("click", function(e){
     console.log(e);
});
}