遍历Javascript中的元素数组时，并非每个元素的类都更新

Question

我有一个简单的JavaScript函数，该函数应更改类，并因此单击时更改4个按钮的颜色。 但是，当第一次按下“单击我”按钮时，它们并不会全部更改-只有button1和button3的颜色变为红色。 再次单击“单击我”按钮，然后更改button2的颜色，并在另一次单击button4之后进行更新。

<style>
    .button {
        background-color: green;
    }

    .updatedButton {
        background-color: red;
        color: white;
    }
</style>

<script>
    function changeColor() {
        var elems = document.getElementsByClassName("button");
        for (var i=0; i<elems.length; i++) {
            console.log(JSON.stringify(elems[i].getAttribute('id')));
            elems[i].classList.add('updatedButton');
            elems[i].classList.remove('button');
        }
    }
</script>

<button id="button1" class="button">a</button>
<button id="button2" class="button">b</button>
<button id="button3" class="button">c</button>
<button id="button4" class="button">d</button>
<button onclick="changeColor()">Click me</button>

我将循环内元素的ID登录到控制台，这就是我得到的结果，只有某些按钮正在更新。

第一次点击：“ button1”（15：16：52：545）“ button3”（15：16：52：547）

第二次点击：“ button2”（15：16：55：981）

第三次点击：“ button4”（15：16：58：841）

我尝试重新加载页面，但是行为是一致的。 有谁能解释为什么会发生这种情况，而不是解释为什么每次按下按钮时每个按钮都会改变颜色？

Answer 1

getElementsByClassName返回的实时集合在删除类时会立即更改。 请改用querySelectorAll 。

 function changeColor() { var elems = document.querySelectorAll(".button"); for (var i = 0; i < elems.length; i++) { console.log(JSON.stringify(elems[i].getAttribute('id'))); elems[i].classList.add('updatedButton'); elems[i].classList.remove('button'); } } 

 .button { background-color: green; } .updatedButton { background-color: red; color: white; } 

 <button id="button1" class="button">a</button> <button id="button2" class="button">b</button> <button id="button3" class="button">c</button> <button id="button4" class="button">d</button> <button onclick="changeColor()">Click me</button> 

Answer 2

getElementsByClassName()返回实时 HTMLCollection ，这意味着，一旦删除button类，它就不再在集合中。

为了防止这种情况，请首先在数组中创建一个浅表副本：

var elems = [...document.getElementsByClassName("button")];

根据您的构建环境支持的内容，您还可以使用Array.from ：

var elems = Array.from(document.getElementsByClassName("button"));

Answer 3

尝试将所有按钮包含在一个div中，并为其分配一个类，然后选择该类中的所有按钮，并更改所有选定按钮的颜色！

Answer 4

就像其他人说的那样，您需要使用querySelctorAll。 检查这个jsfiddle。

http://jsfiddle.net/ekcLbwur/11/

    function changeColor() {
        let elems = document.querySelectorAll(".button");
        for (let i=0; i<elems.length; i++) {
            elems[i].classList.add('updatedButton');
            elems[i].classList.remove('button');
        }
    }
window.onload = function() {
    document.getElementById("button5").onclick = changeColor;
};

另外，作为参考，最好使用let代替var。 此外，最好在JS中更改诸如onClick之类的内容，而不是更改HTML。