Javascript 如何使用if/else语句显示/隐藏多个div？

我的目标是有条件地显示各种div，以便：

• 如果尚未显示“x”div，则显示它
• 显示“y”div，但仅当已显示“x”div时显示
• 仅当已显示“x”和“y”div时才显示“z”div

使用此代码，我可以切换div以显示，然后不显示：

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

但是，当我尝试为多个div执行此操作时，它不起作用

例如，这就是我所尝试的：

函数myFunction（）{
var x=document.getElementById（“myDIV”）；
var y=document.getElementById（“myDIV2”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则如果（y.style.display==“无”）{
y、 style.display=“block”；
}否则{
log（“它工作了！”）；
}
}

我制作了两个代码笔，显示这些代码片段：

---

我将感谢任何帮助。谢谢大家!

那么让我们在第一个

myFunction

中浏览一下它。这将可靠地工作，因为只有两个选项——“x设置为

显示：无”

？如果是，则执行x；否则，执行Y”将始终按预期工作，因为它是简单的二进制逻辑（所有情况都已处理，它基本上只需切换

style.display

属性）。一旦你把更复杂的逻辑引入到等式中，并考虑到多种因素，它就会变得更容易理解，你需要更仔细地制定你的方法

你基本上想要的逻辑是，如果X是隐藏的，那么显示它；如果y是隐藏的，x是可见的，则显示它；最后，如果X可见，y可见，z隐藏，则显示它。您可以通过定义一些快速的

ishiden（）

、

isVisible（）

和

show（）

帮助函数，以真正可读的方式编写此代码：

编辑：FZs很好地说明了类不被这种逻辑捕获的问题。为了说明这一点，我们只需在

ishiden（）

检查中添加一个“OR

classList

contains

hidden

”表达式

//助手
让isHidden=（el）=>el.style.display==“无”| | el.classList.contains（'hidden'），
isVisible=（el）=>！伊希登（el），
show=（el）=>el.style.display=“block”；
//元素
设x=document.getElementById（“div-x”），
y=document.getElementById（“div-y”），
z=document.getElementById（“div-z”）；
//单击处理程序
让handleClick=（）=>{
如果（isHidden（x））
秀(x);；
否则，如果（isHidden（y）和&isVisible（x））
显示（y）；
否则如果（isHidden（z）和&isVisible（y）和&isVisible（x））
显示（z）；
else console.log（“它工作了！”）；
}
document.getElementById（'btn'）。addEventListener（'click'，handleClick）
X
Y
Z
点击我那么让我们在第一个
myFunction
中浏览一下它。这将可靠地工作，因为只有两个选项——“x设置为
显示：无”
？如果是，则执行x；否则，执行Y”将始终按预期工作，因为它是简单的二进制逻辑（所有情况都已处理，它基本上只需切换
style.display
属性）。一旦你把更复杂的逻辑引入到等式中，并考虑到多种因素，它就会变得更容易理解，你需要更仔细地制定你的方法

你基本上想要的逻辑是，如果X是隐藏的，那么显示它；如果y是隐藏的，x是可见的，则显示它；最后，如果X可见，y可见，z隐藏，则显示它。您可以通过定义一些快速的
ishiden（）
、
isVisible（）
和
show（）
帮助函数，以真正可读的方式编写此代码：

编辑：FZs很好地说明了类不被这种逻辑捕获的问题。为了说明这一点，我们只需在
ishiden（）
检查中添加一个“OR
classList
contains
hidden
”表达式


//助手
让isHidden=（el）=>el.style.display==“无”| | el.classList.contains（'hidden'），
isVisible=（el）=>！伊希登（el），
show=（el）=>el.style.display=“block”；
//元素
设x=document.getElementById（“div-x”），
y=document.getElementById（“div-y”），
z=document.getElementById（“div-z”）；
//单击处理程序
让handleClick=（）=>{
如果（isHidden（x））
秀(x);；
否则，如果（isHidden（y）和&isVisible（x））
显示（y）；
否则如果（isHidden（z）和&isVisible（y）和&isVisible（x））
显示（z）；
else console.log（“它工作了！”）；
}
document.getElementById（'btn'）。addEventListener（'click'，handleClick）
X
Y
Z
点击我elem.style
返回
elem
的内联样式（
style=“/*styles*/”
）

由于
#myDiv
和
#myDiv2
只有样式表应用的样式，
x.style.display
将返回
未定义的
，而不是
“无”

要解决这个问题，我建议在元素上切换
.hidden
类：

函数myFunction（）{
var x=document.getElementById（“myDIV”）；
var y=document.getElementById（“myDIV2”）；
if（x.classList.contains（“隐藏”））{
x、 类列表。删除（“隐藏”）；
}else if（y.classList.contains（“隐藏”））{
y、 类列表。删除（“隐藏”）；
}否则{
log（“它工作了！”）；
}
}

。隐藏{
显示：无；
}



或者，交替地展示它们（我想这就是目标）：

函数myFunction（）{
var x=document.getElementById（“myDIV”）；
var y=document.getElementById（“myDIV2”）；
x、 classList.toggle（“隐藏”）
y、 classList.toggle（“隐藏”）
}

。隐藏{
显示：无；
}

因为
elem.style
返回
elem
的内联样式（
style=“/*styles*/”
）

由于
#myDiv
和
#myDiv2
只有样式表应用的样式，
x.style.display
将返回
undefi