“关闭”功能事件监听器

Question

我是Java语言的新手，所以很抱歉如果这个问题在其他地方都得到了解答-我一直在寻找解决方案，但我要么错过了答案，要么只是不明白。

所以基本上，我有很多div，当单击它们时，它们会显示以前隐藏的div。 为了重新隐藏div，我在每个角落都有一个带有十字ID的十字图标。 这个事件监听器应该隐藏div（var expand），但是它只能与页面上的第一个div一起使用，我以为for循环会隐藏所有...？

有什么帮助吗？

示例代码：

var cross = document.querySelectorAll("#cross");

cross.addEventListener("click", function(hide){
for (i = 0; i < expand.length; i++) {
expand[i].style.display = "none";
}
});

Answer 1

首先，您不能有多个带有id="cross"图标。 ID必须是唯一的。 因此，您应该使用class="cross" 。

querySelectorAll返回一个集合，您必须遍历它们。

var cross = document.querySelectorAll(".cross");
for (var i = 0; i < cross.length; i++) {
    cross[i].addEventListener("click", function(){
        for (i = 0; i < expand.length; i++) {
            expand[i].style.display = "none";
        }
    });
}

我怀疑这里的事件侦听器功能不正确。 这将隐藏expand 所有元素，但是您可能只想将它们隐藏在与单击的十字相同的DIV中。 但是没有看到您的HTML，我不知道如何找到相关的DIV。 为了让你在正确的方向前进， this里面的功能将是他们点击该图标，就可以使用this.parentNode找到的容器中，并用它来找到在同一容器中的其他元素。