时间戳

首页 > 解决方案 > 如何使用 if/else 语句显示/隐藏多个 div？

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

问题描述

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

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

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

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

例如，这是我尝试过的：

function myFunction() {
  var x = document.getElementById("myDIV");
  var y = document.getElementById("myDIV2");

  if (x.style.display === "none") {
    x.style.display = "block";
  } else if (y.style.display === "none") {
    y.style.display = "block";
  } else {
    console.log("It worked!");
  }
}

我制作了几个 CodePens 来展示这些片段：

我将不胜感激任何帮助。谢谢！

标签： javascripthtmlcss

解决方案

所以让我们先来看看它myFunction。这将可靠地工作，因为只有两个选项 - “x 设置为display: none？如果是，做 X；否则，做 Y”将始终按预期工作，因为它是简单的二进制逻辑（所有情况都被处理，它基本上只是切换style.display财产）。一旦你将更复杂的逻辑带入等式并考虑到多个因素，它就会变得更滑，你需要更仔细地制定你的方法。

您基本上想要的逻辑是，如果 X 被隐藏，则显示它；如果 y 是隐藏的并且 x 是可见的，则显示它；最后，如果 X 可见且 y 可见且 z 隐藏，则显示它。isHidden()您可以通过定义一些快速、、isVisible()和show()辅助函数以真正易读的方式编写此代码：

编辑：FZ 对没有被这种逻辑捕获的类提出了一个很好的观点。为了解决这个问题，我们需要做的就是在检查中添加一个“OR classListcontains hidden”表达式isHidden()，瞧。

// helpers
let isHidden = (el) => el.style.display == "none" || el.classList.contains('hidden'),
    isVisible = (el) => !isHidden(el),
    show = (el) => el.style.display = "block";

// elements
let x = document.getElementById("div-x"),
    y = document.getElementById("div-y"),
    z = document.getElementById("div-z");

// click handler
let handleClick = () => {

  if (isHidden(x))
    show(x);

  else if (isHidden(y) && isVisible(x))
    show(y);

  else if (isHidden(z) && isVisible(y) && isVisible(x))
    show(z);

  else console.log("It worked!");
  
}

document.getElementById('btn').addEventListener('click', handleClick);
<div id="div-x" style="display:none">X</div>
<div id="div-y" style="display:none">Y</div>
<div id="div-z" style="display:none">Z</div>

<button id="btn">Click me!</button>

推荐阅读