Javascript 在数组中一次向每个元素添加一个类列表-纯js

我是javascript新手，我一直在尝试一些东西，虽然是基本的，但我似乎无法真正理解为什么它不起作用

我有三张图片和一个按钮。每次单击同一个按钮，我都希望其中一个图像消失（使用classList添加一个Css显示类：none）

我试图使用for循环，但当我单击按钮时，它们同时消失。我试图在循环中创建一个变量来存储索引值，但它返回了一个错误

请帮忙！！！谢谢

\\Js

window.onload = function(){


        var button = document.querySelector("button");
        var imgs = document.querySelectorAll("#imagens img");

        button.addEventListener("click",function(){

            for(var i=0; i<imgs.length; i++){

                imgs[i].classList.add("hidden");    

                //var currentImg = this.imgs[i];
                //currentImg.classList.add("hidden");       
            }
        })      
    };

\\\ CSS
    .hidden{
        display:none;
    }

    #images{        
        width:400px;
        height:200px;
        margin:0 auto;
    }


    #images img{
        width:110px;
        height:100px;   
    }

    button{
        margin:100px auto;
    }

\\\ HTML

<div id="images">
    <img src="https://media.defense.gov/2018/Jul/11/2001941257/780/780/0/180711-F-EF974- 0115.JPG" alt="">
    <img src="https://live.staticflickr.com/3267/2590079513_12e2c73226_b.jpg" alt="">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Poinsettia_tree.jpg/360px-Poinsettia_tree.jpg" alt="">  
    <div>
        <button type="button">change</button>
    </div>  
</div>

window.onload=function（）{
var按钮=document.querySelector（“按钮”）；
var imgs=document.queryselectoral（#imagens img”）；
addEventListener（“单击”，函数（）{
对于（var i=0；i
改变

问题在于，每次单击按钮时，您都会循环浏览所有图像，以便将隐藏类添加到所有图像中。您需要做的是创建一个全局变量，用于存储上次隐藏图像的索引。 当你点击按钮时，你在索引+1处将隐藏类添加到图像中，然后为下一个图像增加索引。你不需要有for循环

您还错误地输入了查询选择器，它应该是

var imgs = document.querySelectorAll("#images img");

而不是

var imgs = document.querySelectorAll("#imagens img");

以下是您应该拥有的：

let index=-1；
window.onload=函数（）{
var按钮=document.querySelector（“按钮”）；
var imgs=document.queryselectoral（“#images img”）；
addEventListener（“单击”，函数（）{
索引++；
imgs[index].classList.add（“隐藏”）；
})
}；

。隐藏{
显示：无；
}
#图像{
宽度：400px；
高度：200px；
保证金：0自动；
}
#图像img{
宽度：110px；
高度：100px；
}
钮扣{
保证金：100像素自动；
}

改变

您可以使用

设置超时

来满足此要求，并更新

内的
循环
按钮
点击如下：

for (var i = 0; i < imgs.length; i++) {
  (function(index) {
    setTimeout(function() {
      imgs[index].classList.add("hidden");
    }, i * 1500);
  })(i);
}

for（变量i=0；i

通过这种方式，
hidden
类将在延迟
1500
ms后一次添加到一个图像中。
如果您单击按钮，实际会发生什么？您对按钮单击的期望是什么？？