Question

所以我想通过document.getElementsByClassName（）;获取所有类元素。

<body>
    <div class="circle" id="red"></div>

    <div class="circle" id="blue"></div>

    <div class="circle" id="yellow"></div>

    <input id="disappear" type="button" value="disappear" onclick="disappear()">
  </body>

<script>
     function disappear(){
       document.getElementsByClassName(".circle").style.display = none;
     }
</script>

我想用document.getElementsByClassName(".circle").style.display = none;让这些圈子消失

这不起作用，所以我用了

function disappear(){
            var x, i;
            x = document.querySelectorAll(".circle");
              for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
              }
        }

我的问题是，有没有办法选择所有类而无需循环？

Answer 1

您将需要一个循环来迭代项目。但是，Document.querySelectorAll()返回一个NodeList，您可以使用NodeList.forEach()（仍然是循环）来迭代元素并隐藏它们：

function disappear() {
  document.querySelectorAll(".circle").forEach(el => el.style.display = 'none');
}

<body>
  <div class="circle" id="red">1</div>

  <div class="circle" id="blue">2</div>

  <div class="circle" id="yellow">3</div>

  <input id="disappear" type="button" value="disappear" onclick="disappear()">
</body>

Answer 2

如果您不介意使用jQuery，可以这样做：

$(".circle").css("display", "none");

或更短：

$(".circle").hide();

Answer 3

您可以使用内置数组映射功能

function disappearListener(){
   var circles = document.getElementsByClassName("circle");
   circles.map(circle=>{
      circle.style.display = none;
      //or
      circle.classList.add('.hideCircle');
   })
 }

 var disappearButton = document.getElementById("disappear");
 disappearButton.addEventListener('click',disappearListener)

在CSS文件上

.hideCircle {
   display: none;
}

有没有一种方法可以让所有Class元素都没有for循环？

3 个答案: