使用各自的按钮隐藏 HTML 块答案

【问题标题】：Hide HTML blocks with their respective button使用各自的按钮隐藏 HTML 块
【发布时间】：2021-03-07 05:12:41
【问题描述】：

我目前正在学习一点 JavaScript，并且在做一个项目时遇到了问题。我的 HTML 代码是这样的：

<div class="main">
  <button id="button1" onclick="hideBlock()">Hide Block 1</button>
  <div id="block1"></div>
  <button id="button2" onclick="hideBlock()">Hide Block 2</button>
  <div id="block2"></div>
</div>

我想要的是每个按钮都可以显示和隐藏每个块。这是我编写的第一个块的 JavaScript 代码：

function hideBlock() {
  var block = document.getElementById("block1");   
  if (block.style.display === "none") {
    block.style.display = "block";        
  } else {
    block.style.display = "none";   
  }
}

这可行，但我认为为每个块重复代码是不正确的。我如何将每个按钮与其各自的块连接起来，以使用相同的代码执行所有操作？非常感谢。

【问题讨论】：

标签： javascript html jquery css web

【解决方案1】：

使用nextElementSibling 导航到相邻块，并使用addEventListener 正确附加事件侦听器：

for (const button of document.querySelectorAll('button')) {
  button.addEventListener('click', () => {
    button.nextElementSibling.classList.toggle('hidden');
  });
}

button {
  display: block;
}
.hidden {
  display: none;
}

<div class="main">
  <button>Hide Block 1</button>
  <div>block 1</div>
  <button>Hide Block 2</button>
  <div>block 2</div>
</div>

【讨论】：