如何使用单击事件侦听器制作按钮切换显示？答案

【问题标题】：How to make a button toggle display with click event listener?如何使用单击事件侦听器制作按钮切换显示？
【发布时间】：2020-06-22 20:16:05
【问题描述】：

我有大约 20 个产品，每个产品都有一个按钮和描述框。我已经循环添加了一个单击事件侦听器，一旦单击按钮就会显示产品描述框。

如何让按钮也能够隐藏描述框（即切换显示）？

这是我的代码：

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    descriptionBox = btn.nextElementSibling;
    descriptionBox.style.display = "block";
  });
});

【问题讨论】：

encodedna.com/javascript/…

标签： javascript html css dom event-handling

【解决方案1】：

您可以使用按钮单击处理程序来切换描述文本上的类以切换其可见性。完整的工作示例：

const descBtns = document.querySelectorAll('.desc-btn');

descBtns.forEach((btn) => {
  btn.addEventListener('click', (e) => {

    descText = btn.nextElementSibling;
    descText.classList.toggle('show');
  });
});

.desc-btn {
  display: block;
  margin-bottom: 10px;
}

.desc {
  display: none;
}

.desc.show {
  display: block;
}

<button class="desc-btn">desc btn</button>
<p class="desc">description here</p>
<button class="desc-btn">desc btn 2</button>
<p class="desc">description here 2</p>
<button class="desc-btn">desc btn 3</button>
<p class="desc">description here 3</p>

【讨论】：

【解决方案2】：

您可以简单地切换框上的类。创建一个包含：display:block 的 css 类。然后在框的 classList 上切换该类。

.show{display:block;}

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach((btn)=>{
  btn.addEventListener('click', (e)=>{
    descriptionBox = btn.nextElementSibling;
    descriptionBox.classList.toggle("show");
  });
});

【讨论】：

【解决方案3】：

您可以使用三级运算符来询问该框当前是否正在显示。如果是块将设置为隐藏，如果不是则将其设置为显示块。这是其他 JS 框架中常见的设计模式，因此可能值得一试。

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    descriptionBox = btn.nextElementSibling;
    descriptionBox.style.display === "block" ? discriptionBox.style.display = 'hidden' :
      discriptionBox.style.display = 'block'
  });
});

【讨论】：

【解决方案4】：

为具有“隐藏背景”、“显示背景”类的按钮添加两个事件侦听器。单击任何一个时，将元素类更改为另一个。

.show-background div{ display:block};
.hide-background div{ display:none};


const showBgnd = document.getElementsByClassName('show-background');
const hideBgnd = document.getElementsByClassName('hide-background');

showBgnd.addEventListener('click', (e)=>{
  showBgnd.setAttribute("class","hide-background");
});

hideBgnd.addEventListener('click', (e)=>{
  hideBgnd.setAttribute("class","show-background");
});

【讨论】：

【解决方案5】：

const descriptionBtn = document.querySelectorAll('.desc-btn');

descriptionBtn.forEach(element => {
  element.onclick = function (e) {
    if (this.style.display === "block") {
      this.style.display = "none";
    } else {
      this.style.display = "block";
    }
  };
});

【讨论】：