Question

im是javaScript中的新增功能，我试图通过运行一个函数来隐藏多个div。 div存在，它们称为test1直到test8。每次我激活该功能都会给我错误document.getElementsByClassName(...).style is undefined

这是我的代码

var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"];
for (var i=0; i<divs.length; i++)  {
  document.getElementsByClassName(divs[i]).style.display = "none";
  }

HTML

  <div class="test1">
    <p>Hi 1</p>
  </div>
  <div class="test2">
    <p>Hi 2</p>
  </div>
  <div class="test3">
    <p>Hi 3</p>
  </div>
  <div class="test4">
    <p>Hi 4</p>
  </div>
  <div class="test5">
    <p>Hi 5</p>
  </div>
  <div class="test6">
    <p>Hi 6</p>
  </div>
  <div class="test7">
    <p>Hi 7</p>
  </div>
  <div class="test8">
    <p>Hi 8</p>
  </div>

阅读重复的问题后，我尝试了此操作：

function cleardiv() { 
    var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"]; 
    var elems = document.getElementsByClassName(divs[i]); 
    for (var i = 0; i<elems.length; i++) { 
        elems[i].style.display = 'none'; 
    } 
}

Answer 1

在类中的元素上添加循环时，在类名称上的循环被删除。您需要嵌套循环才能获取所有内容。

function cleardiv() { 
    var divs = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"]; 
    for (var j = 0; j < divs.length; j++) {
        var elems = document.getElementsByClassName(divs[j]); 
        for (var i = 0; i<elems.length; i++) { 
            elems[i].style.display = 'none'; 
        } 
    }
}

您还可以使用querySelectorAll进行单循环。

function cleardiv() {
    var elems = document.querySelectorAll(".test1,.test2,.test3,.test4,.test5,.test6,.test7,.test8");
    for (var i = 0; i<elems.length; i++) { 
        elems[i].style.display = 'none'; 
    } 
}

在getElementsByClassName（）中使用Array

1 个答案: