在一个脚本中隐藏/显示多个 Div答案

【问题标题】：Hide/Show Multiple Divs in one script在一个脚本中隐藏/显示多个 Div
【发布时间】：2022-12-10 20:11:18
【问题描述】：

我是 JS 新手，正在尝试为我的网站编写代码。我想隐藏/显示 div onclick，我可以毫无问题地做到这一点，但是一旦我想再次这样做，我必须为我想隐藏的每个 div 复制脚本...有人可以帮我解决这个问题脚本以便我只需要一次？也许使用变量或其他东西？我真的是 JS 的新手，非常感谢您的帮助！

这是脚本的示例：

<script>
    function hideShowDiv1() {
  var x = document.getElementById("hideShowDiv1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

【问题讨论】：

为什么不将 div 名称传递给您的函数

标签： javascript hide show

【解决方案1】：

使用类而不是 id - 因为在 HTML 中只能有一个元素具有相同的 ID 但许多元素具有相同的类。这里是工作代码的简单示例。

HTML:

<div class="a">Test 1</div>
<div class="a">Test 2</div>

Java脚本：

const toggle = () => {
  Array.from(document.getElementsByClassName('a')).forEach(e => {
    console.log('e', e.style.display, (e.style.display === 'none'))
    e.style.display = (e.style.display === 'none') ? 'block' : 'none'
  })
}

【讨论】：

【解决方案2】：

我建议您为此使用 css 类。

可以直接运行下面的sn-p：

function toggleVisibility(e) {
  const targets = document.querySelectorAll('.target');
  targets.forEach(target => {
    if (target.style.display === 'none') {
      target.style.display = 'block';
    } else {
      target.style.display = 'none';
    }
  });
}

.target {
  width: 100px;
  height: 100px;
  background: blue;
  border: 1px solid black;
  display: block;
}

<button class="toggle" onclick="toggleVisibility()">Toggle</button>

<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>

【讨论】：

【解决方案3】：

这取决于您尝试访问的元素的外观。例如，您可以向其中添加公共类并根据此类名称查询它们

const allElements = document.querySelectorAll(".commonClassName");

allElements.forEach(element => {
  element.style.display = (element.style.display === "none")
    ? "block"
    : "none"
})

您可以在本页 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll 上使用 querySelectorAll 找到更多示例

【讨论】：

【解决方案4】：

作为新手，我很难做到这一点。我在 WP 网站上使用 bootstrap，并在 Bootstrap 中找到了我需要的代码，看起来像这样。我发现这做了我需要的。

这适用于每个按钮 => 按钮 data-toggle="collapse" data-target="#toggle_xanadu" aria-expanded="false" aria-controls="toggle_xanadu">更多.../按钮这显示内容 - > div class="list_div collapse" id="toggle_xanadu">内容

很简单，但在 Bootstrap 网站上阅读更多内容以获得更多选项。

从长远来看，我正在为此寻找数据库和 PHP。

希望能帮助到你。

【讨论】：