Question

我一直在这个圈子里四处走动。我有一个PHP输出，生成一系列DIV元素，每个都有一个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

.success(function(uri) { $scope.iframeUri = uri; });返回一个类似数组的节点集合;那些没有getElementsByClass的个别节点。

你不能正常迭代它，因为它是一个实时集合：如果你改变了第一个元素的类，那么数组会缩短一个，所以如果你从头到尾迭代你只会处理一半的节点。从头到尾迭代修复了这个问题。

className

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

.L1hide {
  display: none;
}

Answer 2

getElementByClassName（）返回一个数组。您必须对其进行迭代，然后更改属性。

使用getElementsByClass时无法更改类

2 个答案: