Question

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

正如您在选择input框时尝试隐藏框时所看到的那样，它无法正常工作;但是当你var x，var x = document.getElementById("a");时，它就可以了。有没有办法隐藏所有不同的盒子？

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

您正在制作一个列表（>），然后尝试设置列表本身的样式，而不是其内容。

JavaScript为此提供了一种简单的列表方法，"：

[]

See this codepen demo
注意：您的代码在获取样式时遇到了一个小错误，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'; }); }在上面的代码和codepen中修复了它。

让<div>同时消失

1 个答案: