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。

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

4 个答案: