Question

我是Javascript的新手，所以我很抱歉，如果这个问题已在其他地方得到解答 - 我已经找到了解决方案，但我要么错过了答案，要么就是在理解时不理解我明白了。

所以基本上，我有一些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查找容器，并使用它来查找同一容器中的其他元素。

＆＃34;关闭＆＃34;函数事件监听器

1 个答案: