与 HTML/CSS 元素相关的 Javascript 函数

Question

已修复!我将“#slide”更改为“.slide”，这就是问题所在。谢谢大家!

大家好，Stack Overflow 的人们。我的代码遇到问题，它似乎没有隐藏应该隐藏的元素。
Java脚本:

let sliderImages = document.querySelectorAll('#slide'),
     arrowRight = document.querySelector(".next"),
     arrowLeft = document.querySelector(".prev"),
     current = 0;
//            reset all images
function reset(){
    for(let i = 0; i < sliderImages.length; i++){ 
        // "let" means make a variable which will only be used in the LOCAL scope.
        sliderImages[i].style.display = "none";
    }
}
function startSlide(){
    reset();
}
startSlide();
function test(){
    console.log("hello!") // to prove that this file is running
}
test();

我期望的结果是所有带有 div“#slide”的图像/事物都是不可见的。相反，我在网页上没有任何变化。如果发布 HTML 有帮助，我会的。我已经检查过了，我相信名称中没有错别字。

Answer 1

元素 ID 必须是 unique on the page .您似乎有不止一个 #slide，所以我的建议是从 ID 更改为类，这样您的 div 将是:

<div class="slide">...</div>

这样，您只需使用:

let sliderImages = document.querySelectorAll('.slide');

然后迭代它们:

sliderImages.forEach(function(sliImg) {
  sliImg.style.display = "none";
});