javascript - 在 getElementsByClassName() 中使用数组

Question

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