javascript - 如何在单击时在具有相同类名的多个元素上切换类

Question

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

我正在尝试使用一个循环遍历所有“按钮”(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>

Answer 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中应切换“隐藏”的元素。