Question

我正在尝试制作一个程序，当按下一个按钮时，将调用一个函数，并且除一个div以外的所有内容都被隐藏。但是我不明白为什么这行不通。如果有一些简单的解决方法，我将不胜感激，但是我可能会完全解决此问题。

function myFunction() {
  var x = document.getElementById("div1");
  var y = document.getElementById("main");
  y.style.display = "none";
  x.style.display = "block";
};

#div1 {
  width:50px;
  height:50px;
  background-color: blue;
}

#div2 {
  width:50px;
  height:50px;
  background-color: red;
}

#div3 {
  width:50px;
  height:50px;
  background-color: green;
}

<html>
<body>
<div id="main">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <button onclick="myFunction()">Show only Div 1</button>
</div>
</body>
</html>

我正试图在没有jQuery的情况下执行此操作，但是如果这是实现我正在尝试执行的操作的唯一方法，那么我将使用它。

编辑：假设我有很多div。有没有一种快速的方法可以隐藏所有这些，而没有一种无需jQuery，而不必单独遍历所有div并隐藏它们呢？

Answer 1

您实际上应该使用类和addEventListener，因为不建议使用内联脚本，也不要内联更改样式。

在button上单击，将类添加到main，然后使用其CSS规则隐藏所选的div，例如使用nth-child(n+2)或:not(:first-child)

堆栈片段

document.querySelector('button').addEventListener('click', function() {
  document.getElementById("main").classList.toggle('hideallbutdiv1');
})

#div1 {
  width:50px;
  height:50px;
  background-color: blue;
}

#div2 {
  width:50px;
  height:50px;
  background-color: red;
}

#div3 {
  width:50px;
  height:50px;
  background-color: green;
}

#main.hideallbutdiv1 div:nth-child(n+2) {  /*  or div:not(:first-child) */
  display: none;
}

<html>
<body>
<div id="main">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <button>Show only Div 1</button>
</div>
</body>
</html>

这是使用伪元素在按钮上的文本进行切换的加香料版本

document.querySelector('button').addEventListener('click', function() {
  document.getElementById("main").classList.toggle('hideallbutdiv1');
})

#div1 {
  width:50px;
  height:50px;
  background-color: blue;
}

#div2 {
  width:50px;
  height:50px;
  background-color: red;
}

#div3 {
  width:50px;
  height:50px;
  background-color: green;
}

button::before {
  content: attr(data-show)
}

#main.hideallbutdiv1 div:nth-child(n+2) {
  display: none;
}

#main.hideallbutdiv1 button::before {
  content: attr(data-hide)
}

<html>
<body>
<div id="main">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <button data-show="Show only Div 1" data-hide="Show all"></button>
</div>
</body>
</html>

Answer 2

无需隐藏容器。只需隐藏您要定位的div：

function myFunction() {
  var x = document.getElementById("div1");
  var y = document.getElementById("div2"); //  change it to div2 NOT main
  y.style.display = "none";
  x.style.display = "block";
};

Answer 3

要隐藏main以外的div1的所有子代，您必须直接隐藏div1的所有同级。

获取兄弟姐妹的功能如下：

function getSiblings(elem) {
        var siblings = [];
        var sibling = elem.parentNode.firstChild;
        var skipMe = elem;
        for ( ; sibling; sibling = sibling.nextSibling ) 
           if ( sibling.nodeType == 1 && sibling != skipMe )
              siblings.push( sibling );
        return siblings;
    }

您的按钮点击处理程序：

function myFunction() {
      var x = document.getElementById("div1");
      var siblings = getSiblings(x);
      siblings.forEach(function(y){
        y.style.display = "none";
      });
    }

Here's the working example.

Answer 4

不要隐藏容器，否则它将隐藏所有子容器。

do_action()

function myFunction() {
  var x = document.getElementById("div1");
  var y = document.getElementById("div2");
  y.style.display = "none";
  x.style.display = "block";
};

#div1 {
  width:50px;
  height:50px;
  background-color: blue;
}

#div2 {
  width:50px;
  height:50px;
  background-color: red;
}

编辑：如果您确实只想 div1，也可以使用相同的方法隐藏按钮。

Answer 5

您正在隐藏包含所有3个div的main。

function myFunction() {
  var x = document.getElementById("div1"); // <- you dont need this cause its visible initially
  var y = document.getElementById("div2");
  var z = document.getElementById("div3");
  
  x.style.display = "block"; // <- you dont need this cause its 
  y.style.display = "none";
  z.style.display = "none";
};

#div1 {
  width:50px;
  height:50px;
  background-color: blue;
}

#div2 {
  width:50px;
  height:50px;
  background-color: red;
}

#div3 {
  width:50px;
  height:50px;
  background-color: green;
}

<html>
<body>
<div id="main">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <button onclick="myFunction()">Show only Div 1</button>
</div>
</body>
</html>

为什么div隐藏但不显示？

5 个答案: