为什么 for 循环会遍历长度为 1 的数组？

Question

在以下程序中，调用两个函数之一 - 根据 c 值是否与任何给定 div 中的类属性匹配，函数添加 (w3AddClass) 或删除 (w3RemoveClass) div 项。在这两个函数中都有一个 for 循环。我的问题是关于 for 循环的——在这两个函数中，for 循环都循环通过一个长度仅为 1 的数组（arr2）（即“显示”）。它不应该循环遍历更长的数组（arr1）吗？

filterSelection("cars")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");

  if (c == "all") c = " ";

  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");

    if (x[i].className.indexOf(c) > -1)
      w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, ** name ** ) {
  var i, arr1, arr2;

  arr1 = element.className.split(" "); **
  arr2 = name.split(" "); **

  for (i = 0; i < ** arr2.length ** ; i++) {

    if (arr1.indexOf(arr2[i]) == -1) {
      element.className = element.className + " " + arr2[i];
    }
  }
}

function w3RemoveClass(element, name) {
  //etc...
}

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('cars')"> Show all</button>
  <button class="btn" onclick="filterSelection('animals')"> Animals</button>
  <button class="btn" onclick="filterSelection('fruits')"> Fruits</button>
  <button class="btn" onclick="filterSelection('colors')"> Colors</button>
</div>

<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Orange</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Red</div>
  <div class="filterDiv cars animals">Mustang</div>
  <div class="filterDiv colors">Blue</div>
  <div class="filterDiv animals">Cat</div>
</div>

Answer 1

难道不应该循环遍历更长的数组 (arr1) 吗？

不，它没有。 arr1 仅用于检查元素是否已给定类。

例如，w3AddClass 的第二个参数可以是空格分隔的字符串。 w3AddClass(e, "a b c") 会将a、b 和c 类添加到元素中。