时间戳

首页 > 解决方案 > 如何使用多个按钮切换可见性？

javascript - 如何使用多个按钮切换可见性？

问题描述

可以说我有几个切换按钮。切换 1 和 2 将切换 div 的可见性，只要其中一个或两个按钮处于活动状态，就会出现 div。

切换和 div 是从 db 记录动态创建的。所以会有一些例子，我们有 3 个切换和 2 个 div。例如：

toggle1 和 toggle2 激活 div1

toggle2 和 toggle3 激活 div2

我相当肯定这是一个 JS 问题，但如果它可以在没有 JS 的情况下解决，那么我会很高兴。

标签： javascripthtmlcssasp.net-core-mvc

解决方案

编辑以匹配新要求。

您可以使用“跟随兄弟”选择器来检查按钮是否跟随选中的复选框。

button {
  display: none;
}
.btn1:checked ~ #btn1,
.btn2:checked ~ #btn2 {
  display: block;
}
<input type="checkbox" class="btn1">
<input type="checkbox" class="btn1 btn2">
<input type="checkbox" class="btn2">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>

这对 HTML 结构非常敏感。如果复选框和按钮是同级的，这很容易，但如果有不同的级别，就会变得更难，或者不可能。JavaScript 解决方案不太关心结构：

const buttons = Array.from(document.querySelectorAll('button'));
Array.from(document.querySelectorAll('input[type="checkbox"]'));

function setButton(button, visible) {
  button.style.display = visible ? "inline" : "none";
}

document.querySelector('div').addEventListener('click', evt => {
  if (evt.target.matches('input[type="checkbox"]')) {
    buttons.forEach(button => {
      let selector = button.getAttribute('data-cb');
      let checkboxes = Array.from(document.querySelectorAll(selector));
      let someChecked = checkboxes.some(e => e.checked);
      setButton(button, someChecked);
    });
  }
});
buttons.forEach(button => setButton(button, false));
<div>
  <input type="checkbox" id="cb1">
  <input type="checkbox" id="cb2">
  <input type="checkbox" id="cb3">
  <button data-cb="#cb1,#cb2">btn1</button>
  <button data-cb="#cb2,#cb3">btn2</button>
</div>

推荐阅读