Question

我正在制作网站的广告资源页面。我希望能够使用复选框对项目进行排序。我认为我需要的是为每个人应用一个div类，并使用document.getElementsByClassName将我想隐藏的显示更改为none。

无论如何我尝试使用document.getElementsById，但我只能用相应的Id更改第一个。显然我需要改变课程。这就是我现在所处的位置。

P.S [sc：1]是wordpress的短代码。当我使用Id时似乎工作。

<script>
 function toggle() {
       var e = document.getElementsByClassName('truck');
       if(e.style.display == "block")
          e.style.display = "none";
       else
          e.style.display = 'block';
   }
</script>
<input type="checkbox" id="checkme" onclick="toggle()">Dump Truck
<div class="truck">This is text that should hide</div>
<div class="truck">[sc:1 ]</div>
<div class="sweeper">[sc:2 ]</div>
<div class="sweeper">[sc:3 ]</div>

Answer 1

您必须遍历document.getElementsByClassName('truck');返回的集合：

for (var i = 0; i < e.length; i++) {
    if(e[i].style.display == "block")
      e[i].style.display = "none";
   else
      e[i].style.display = 'block';
}

document.getElementsByClassName返回一组与该类名匹配的元素，因此您有一个DOM元素数组：[elem1, elem2, elem3, ..]。你不能只设置[].display == prop - 你必须迭代集合并设置每个元素的显示。

Answer 2

document.getElementsByClassName（ '卡车'）;始终返回具有类“track”的所有元素的数组列表，因此即使您有一个具有类“truck”的元素，getElementsByClassName（'truck'）也会返回数组中的单个元素。

请注意，获取**元素** ByClassName具有复数形式的元素，该元素引用一组要提取的元素项。

对于您的情况，您必须迭代数组项以获取每个元素并执行操作。

尝试使用以下代码块

<script>
function toggle() {
   var e = document.getElementsByClassName('truck'); 
   // Get all the elements that has the class name 'truck', so for your example, 
   // there are 2 items and the array e would have 2 items (i.e. e[0] will have the
   // div element that has 'This is text that should hide' as the inner HTML and e[1]
   // will have the div element that has [sc:1 ] as the inner HTML

   for (var x=0; x < e.length; x++) {
       if(e[x].style.display == "block")    // Get the xth element's style
          e[x].style.display = "none";
       else
          e[x].style.display = 'block';
   }
}
</script>

请注意，即使您有一个类名为“truck”的单项，您也会在返回数组的第0个位置找到它（即e [0]）。

使用onclick和复选框切换类

2 个答案: