Question

我写了一个脚本，它的目标是停止显示图像1和图像2，同时允许图像3保持显示并移动到它们的位置。当我使用div Id而不是div Classes时，它工作正常，但我更喜欢使用div类，所以我可以像这样对元素进行分组：

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

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

 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返回一个元素数组，因此您需要遍历该数组并对该循环中的每个元素进行操作。

Answer 2

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

段

＆＃13;

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';
    }
  }
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

在这个功能中，只需使用＆＃34;类似数组＆＃34;上面的Snippet中演示了一个NodeList等对象。将以与Snippet中相同的方式使用数组。你是否想要对div进行更高级的处理，例如在每个div上运行一个函数并返回，然后转换一个＆＃34; array-like＆＃34;将对象放入数组中以运行map，forEach，slice等方法。

getElementsByClassName不起作用，但是getElementById呢？

2 个答案:

段