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

Question

我有大约 20 个产品，每个产品都有一个按钮和描述框。我已经循环添加了一个单击事件侦听器，一旦单击按钮就会显示产品描述框。我怎样才能让按钮也能够隐藏描述框（即切换显示）？这是我的代码：const descriptionBtn = document.querySelectorAll('.desc-btn');descriptionBtn.forEach((btn) => {  btn.addEventListener('click', (e) => {    descriptionBox = btn.nextElementSibling;    descriptionBox.style.display = "block";  });});

Answer 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>

Answer 2

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

.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");

});

Answer 3

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";

    }

  };

});

Answer 4

您可以使用三级运算符来询问该框当前是否正在显示。如果是块将设置为隐藏，如果不是则将其设置为显示块。这是其他 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'

  });

});