javascript - 让 <div> 同时消失

Question

您将在下面找到的代码的目的是制作某种过滤器。但由于某种原因，它不起作用。

如您所见，当您在选择 input 框时尝试隐藏框时，它不会起作用；但是当你制作 var x 时，var x = document.getElementById("a"); 它将起作用。有没有办法隐藏所有不同的盒子？

function myFunction1() {
  var x = [document.getElementById("a"), document.getElementById("b"), document.getElementById("c")];

  if (x.style.display == 'block')
    x.style.display = 'none';
  else
    x.style.display = 'block';
}

#a, #b, #c {
  float: left;
  width: 25%;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #002261;
  margin: -1px;
  text-align: center;
  display: block;
}

<input type="checkbox" onclick="myFunction1()">Try to hide all


<div id="a">item a</div>
<div id="b">item b</div>
<div id="c">item c</div>

如您所见，您无法同时隐藏所有框。

Answer 1

您正在创建一个列表([])，然后尝试设置列表本身的样式，而不是其内容。

JavaScript 为此提供了一个简单的列表方法，forEach():

function myFunction1() {
  var x = [document.getElementById("a"), document.getElementById("b"), document.getElementById("c")];
  x.forEach(function(item) {
    if (window.getComputedStyle(item).display === 'block') item.style.display = 'none';
    else item.style.display = 'block';
  });
}

See this codepen demo
注意:您的代码在获取样式时有一个小错误，item.style.display 仅获取内联样式，因此您第一次调用该函数时它不会隐藏元素。我用 window.getComputedStyle(item).display 在上面的代码和 codepen 中修复了它。