javascript - 如何访问数组中的类并使用 javascript 设置它们的样式

Question

假设我有 3 个不同的类(class):一、二和三。每个类都有 3 个 div，如下所示:

<div class="one"></div>
<div class="one"></div>
<div class="one"></div>

<div class="two"></div>
<div class="two"></div>
<div class="two"></div>

<div class="three"></div>
<div class="three"></div>
<div class="three"></div>

然后我给每个类一个变量:

var _1 = document.getElementsByClassName("one");
var _2 = document.getElementsByClassName("two");
var _3 = document.getElementsByClassName("three);

然后我将它们全部放入一个名为 nums 的数组中:

var nums = [_1,_2,_3];

如果我想遍历并更改类中每个单独的 div 的文本颜色:一、二和三。如果不做这样的事情，我将如何去做:

function textColor() {
  var i;
  for (i = 0; i < _1.length; i++) {
    _1[i].style.color = "red";
  }

for (i = 0; i < _2.length; i++) {
        _2[i].style.color = "red";
      }

for (i = 0; i < _3.length; i++) {
        _3[i].style.color = "red";
      }
}

我真的希望只有一个 for 循环遍历并获取数组 nums 中的所有元素，然后遍历并从 nums 中的每个元素中获取每个 div 并更改文本颜色。

Answer 1

将它们放入 nums 时使用 concat(并将 NodeList 转换为数组)

var nums = Array.from(_1).concat(Array.from(_2)).concat(Array.from(_3));

或者使用展开运算符

var nums = [..._1,..._2,..._3];

然后你可以做

function textColor() {
  nums.forEach(node => node.style.color = 'red');
}