时间戳

首页 > 解决方案 > Javascript循环只执行一次

javascript - Javascript循环只执行一次

问题描述

当我在外面单击时，我希望所有div带有my-select-dropdown和block classes 的 s 立即变得不可见。下面的代码不会给我错误，但div每次点击都会让 s 一个一个消失。但我想立刻全部消失。

我的代码：

window.addEventListener("click", function (e) {
        var dropdowns = document.getElementsByClassName("my-select-dropdown block");        
        console.log(dropdowns.length)
        for (var i = 0; i < dropdowns.length; i++) {
            console.log(dropdowns[i])
            if (e.target.closest('.my-select > button')){
                // pass
            }
            else if (e.target !== dropdowns[i] && !e.target.closest(dropdowns[i].classList)){
                dropdowns[i].classList.replace("block", "hidden");
            }
        }
    });

Console log返回 2，只有一个HTML element，这意味着只有第一个loop正在执行。

标签： javascript

解决方案

所以，这是一个棘手的问题。事实证明，如果你反转你的循环，它就会起作用。无论出于何种原因，dropdowns当您更改 时，数组会被重新评估DOM，因此您的数组越来越短，而您实际上只做了一半的divs。你没有看到这个，因为你显然只有 2 个。当我输入 4 时，它更清晰了，因为它显示了我Test1，而我Test3将ids 更改为显示，而不是完整的div.

我为这些类编了一些东西，因为你没有包含它，但它似乎可以div用你的代码隐藏 s 。

下面的链接说更改DOM将导致数组重新评估，所以这是意料之中的，只是不是我或你显然。:-)

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

window.addEventListener("click", function (e) {
        var dropdowns = document.getElementsByClassName("my-select-dropdown block");        
        console.log(dropdowns.length)
        for (var i = dropdowns.length-1; i >= 0 ; i--) {
            console.log(dropdowns[i].id)
            if (e.target.closest('.my-select > button')){
                // pass
            }
            else if (e.target !== dropdowns[i] && !e.target.closest(dropdowns[i].classList)){
                dropdowns[i].classList.replace("block", "hidden");
            }
        }
    });
.my-select-dropdown
{
  font-family: "Ariel";
}

.block
{
  display: block;
}

.hidden
{
  display: none;
}
<div id='test1' class="my-select-dropdown block" type="button">Test 1</div>
<div id='test2' class="my-select-dropdown block" type="button">Test 2</div>
<div id='test3' class="my-select-dropdown block" type="button">Test 3</div>
<div id='test4' class="my-select-dropdown block" type="button">Test 4</div>

推荐阅读