javascript - 使用 getElementsByClass 时无法更改类

Question

我一直在绕圈子。我有一个生成一系列 DIV 元素的 PHP 输出，每个元素都有一个类 L1、L2、L3 等。这些类有一个基本为空的 CSS，因此它们默认显示。

问题是试图根据一个简单的 onclick 函数更改每个 DIV 的类以隐藏它。我正在使用 document.getElementsByClass 来获取(例如) DIV CLASS="L1"元素。但是，当我尝试使用 setAttribute('class', 'L1hide') 或 className = "L1hide"更改类时，没有任何反应。

我知道 HTML/CSS 部分有效，因为我更改了 PHP 以生成“L1hide”而不是仅仅“L1”，并且看到 DIV CLASS="L1hide"元素确实被隐藏了。

是因为我想同时抢类和改类吗？我看到的所有示例都使用 getElementById，但这对我来说并不实用，因为 ID 必须是唯一的。我有零个、一个或多个 L1/L2 等。类元素。

下面是一些 PHP 输出的 HTML 代码:

<div class="L1"><h3>Owner</h3>
<table>
  <tr><td>Jim Smith</td></tr>
</table>
</div>

<div class="L1"><h3>Executives</h3>
<table>
  <tr><td>Harry Atkins</td></tr>
  <tr><td>Galen Singh</td></tr>
</table>
</div>

<div class="L2"><h3>Managers</h3>
<table>
  <tr><td>Andy Jones</td></tr>
  <tr><td>Mary Thompson</td></tr>
  <tr><td>Bill Murphy</td></tr>
</table>
</div>

这里是一些javascript。这应该会改变图像并隐藏 L1。图像更改确实有效(前 4 行)，但样式不会改变(最后 2 行)，尽管我提供了烧毁的产品:

managmentImage.onclick = function() {
  if (managmentLevel == "TOP1.png") {
    document.getElementById("managementImage").setAttribute("src", "TOP0.png");
    managmentLevel = "TOP0.png";
    document.getElementsByClassName("L1").className = "L1hide";
    divL1 = "L1hide";
} else { ...

注意:基本上有重复的“else”代码来改回图像，并重新显示 L1。我只提供了“if”语句的前半部分，因为该解决方案也适用于剩余的“else”部分。

Answer 1

getElementsByClass 正在返回一个类似数组的节点集合；那些没有 className，个别节点有。

你不能正常迭代它，因为它是一个活集合:如果你改变第一个元素的类，数组会缩短一个，所以如果你从头到尾迭代你只会处理一半的节点.从头到尾迭代解决了这个问题。

var elements = document.getElementsByClassName("L1");
console.log(elements);
var i = elements.length;
while (i--) {
  elements[i].className = "L1hide";
}

.L1hide {
  display: none;
}

<div class="L1"><h3>Owner</h3>
<table>
  <tr><td>Jim Smith</td></tr>
</table>
</div>

<div class="L1"><h3>Executives</h3>
<table>
  <tr><td>Harry Atkins</td></tr>
  <tr><td>Galen Singh</td></tr>
</table>
</div>

<div class="L2"><h3>Managers</h3>
<table>
  <tr><td>Andy Jones</td></tr>
  <tr><td>Mary Thompson</td></tr>
  <tr><td>Bill Murphy</td></tr>
</table>
</div>