javascript - 在 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 记录到控制台，这就是我显示只有某些按钮正在更新的内容。

第一次点击:“按钮 1”(15:16:52:545)“按钮 3”(15:16:52:547)

第二次点击:“按钮 2”(15:16:55:981)

第三次点击:“按钮 4”(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>