如何在单击时切换具有相同类名的多个元素的类答案

【问题标题】：How to toggle class on multiple elements with same class name on click如何在单击时切换具有相同类名的多个元素的类
【发布时间】：2019-08-29 18:59:34
【问题描述】：

我无法让这段代码工作。
我正在尝试创建一个函数，该函数可以监听单击具有相同类名的多个元素，然后单击后，在具有特定类名的下一个元素上切换特定类名。

我正在尝试使用循环遍历所有“按钮”（class="click-to-expand"）的循环，当您单击特定按钮时，它应该循环遍历特定 div 并在下一个元素上切换类名与 (class="expand")。

任何帮助将不胜感激！

var expandArray = document.querySelectorAll('.expand');

document.querySelectorAll('.click-to-expand').forEach(function(i) {
  i.addEventListener('click', function(e) {
    e.target.expandArray[0].classList.toggle("hidden");
  })
});

.hidden {display: none}

<div>
  <div>
    <div class="click-to-expand">+</div>
  </div>
</div>
<div class="expand hidden">asd</div>

<br>

<div>
  <div>
    <div class="click-to-expand">+</div>
  </div>
</div>
<div class="expand hidden">asd</div>

<br>

<div>
  <div>
    <div class="click-to-expand">+</div>
  </div>
</div>
<div class="expand hidden">asd</div>

【问题讨论】：

标签： javascript css toggle

【解决方案1】：

你可以试试这个


var expandArray = document.querySelectorAll('.expand');
var buttonArray = document.querySelectorAll('.click-to-expand');

document.querySelectorAll('.click-to-expand').forEach(function(i) {
  i.addEventListener('click', function(e) {
    const clickedBtnIndex = [...buttonArray].indexOf(e.target);
    expandArray[clickedBtnIndex].classList.toggle("hidden");
  })
});

逻辑是找出被点击按钮的索引，并使用相同的索引在expandArray中找到应该切换“隐藏”的元素。

【讨论】：

我没想到。谢谢！