在getElementsByClassName（）中使用Array

Question

我是java的新手，我试图通过运行一个函数来隐藏多个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'; 
    } 
}