getElementsByClassName 不起作用，但 getElementById 可以吗？

Question

我写了一个脚本，它的目标是停止显示图像 1 和 2，同时允许图像 3 保持显示并移动到它们的位置。当我使用 div Id 而不是 div 类时效果很好，但我更愿意使用 div 类这样我就可以像这样对元素进行分组：

 function myFunction() {
     var y = document.getElementsByClassName("firstimage secondimage");
     if (y.style.display === 'none') {
           y.style.display = 'block';
     } else {
           y.style.display = 'none';
     }
 }

而不是这个（为了节省 space 我应该选择包含更多元素）：

 function myFunction() {
     var x = document.getElementById("firstimage");
     if (x.style.display === 'none') {
          x.style.display = 'block';
     } else {
          x.style.display = 'none';
     }

     var y = document.getElementById("secondimage");
     if (y.style.display === 'none') {
          y.style.display = 'block';
     } else {
          y.style.display = 'none';
     }
}

我认为只需将 div id 更改为 div 类，并将 #imagenumber 更改为 .imagenumber（除了更改 javascript 我如上所述）会起作用，但当我这样做时脚本会停止工作。我需要脚本以与我在下面粘贴的代码相同的方式运行，但使用 div 类而不是 div Id。请告诉我哪里错了。

CSS:

#firstimage {
    width: 100px;
    height: 100px;
    padding: 0px 0;
    text-align: center;
    background-color: green;
    margin-top:20px;
    color: white;
}

#secondimage {
    width: 100px;
    height: 100px;
    padding: 0px 0;
    text-align: center;
    background-color: blue;
    margin-top:20px;
    color: white;
}

#thirdimage {
    width: 100px;
    height: 100px;
    padding: 0px 0;
    text-align: center;
    background-color: red;
    margin-top:20px;
    color: white;
}

HTML:

<button onclick="myFunction()">Try me</button>

<div id="firstimage">
    DIV element.
</div>

<div id="secondimage">
    A second DIV element.
</div>

<div id="thirdimage">
    A third DIV element.
</div>

Javascript:

function myFunction() {
     var x = document.getElementById("firstimage");
     if (x.style.display === 'none') {
          x.style.display = 'block';
     } else {
          x.style.display = 'none';
     }

     var y = document.getElementById("secondimage");
     if (y.style.display === 'none') {
          y.style.display = 'block';
     } else {
          y.style.display = 'none';
     }
}

Answer 1

document.getElementsByClassName returns 一个元素数组，因此您需要遍历该数组并对该循环中的每个元素进行操作。

Answer 2

您应该使用 getElementsByClassName() 或 querySelectorAll() 来收集所有 div.Klass（Klass 是任意名称）。以下代码段使用 querySelectorAll() 详细信息在源代码中进行了注释。

片段

function toggleDiv() {
  // Collect all .image into a NodeList
  var xs = document.querySelectorAll(".image");
  // Declare i and qty for "for" loop
  var i, qty = xs.length;
  // Use "for" loop to iterate through NodeList
  for (i = 0; i < qty; i++) {
    // If this div.image at index [i] is "none"...
    if (xs[i].style.display === 'none') {
      // then make it "block"... 
      xs[i].style.display = 'block';
    } else {
      // otherwise set display to "none"
      xs[i].style.display = 'none';
    }
  }
}

#firstimage {
  width: 100px;
  height: 100px;
  padding: 0px 0;
  text-align: center;
  background-color: green;
  margin-top: 20px;
  color: white;
}
#secondimage {
  width: 100px;
  height: 100px;
  padding: 0px 0;
  text-align: center;
  background-color: blue;
  margin-top: 20px;
  color: white;
}
#thirdimage {
  width: 100px;
  height: 100px;
  padding: 0px 0;
  text-align: center;
  background-color: red;
  margin-top: 20px;
  color: white;
}

<button onclick="toggleDiv()">Try me</button>

<div id="firstimage" class='image'>
  DIV element.
</div>

<div id="secondimage" class='image'>
  A second DIV element.
</div>

<div id="thirdimage" class='img'>
  A third DIV element.
</div>

在此函数中，仅使用“类数组”对象，例如上面代码段中演示的 NodeList。数组的使用方式与代码段中的方式相同。如果您想对 div 进行更高级的处理，例如运行在每个 div 上设置一个函数并返回，那么将“类数组”对象转换为数组对于运行方法是必要的，例如map、forEach、slice 等

getElementsByClassName 不起作用，但 getElementById 可以吗？

getElementsByClassName doesn't work, but getElementById does?

html

javascript

css

function

getelementsbyclassname

片段