for 遍历 vanilla javascript 中的元素 - 只有手风琴中的第一个元素有效

Question

我正在开发一个小型手风琴组件。我知道如何使用此代码使其在 jQuery 中工作：

const eCta    = $('.js-accordion-cta');
const eTarget = $('.js-accordion-target');
const state   = 'active';

eCta.on('click', function(){
   $(this).next(eTarget).toggleClass(state);
   $(this).toggleClass(state);
});

我不想避免使用像 jQuery 这样的外部库，但我无法让它与 js 一起工作。它仅适用于手风琴中的第一个元素。

const item = document.querySelectorAll(".js-accordion-item");
const eCta = document.querySelector(".js-accordion-cta");
const eTarget = document.querySelector(".js-accordion-target");
const state = "active";

item.forEach(function (item, index) {
  
  eCta.onclick = function () {
    
    this.classList.toggle(state);
    this.nextElementSibling.classList.toggle(state);
    
  };
  
});

<div class="item js-accordion-item">

    <a class="cta js-accordion-cta">Accordion Title 1 (cta)</a>

    <div class="target js-accordion-target">
      <h3>Lorem ipsum item</h3>
      <p>Content lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
    </div>

</div>
  
<div class="item js-accordion-item">
...

遍历 dom 项以与之交互的正确方法是什么？最好在 ES6

Codepen demo

Answer 1

我想这是因为 const eCta = document.querySelector(".js-accordion-cta"); 只选择了第一个元素。

我好像不能分享修改后的codepen，不过我只是把JS改成下面这样

const items = document.querySelectorAll(".js-accordion-item");
const state = "active";

items.forEach(function (item, index) {
  const eCta = item.querySelector('.js-accordion-cta')
  eCta.onclick = function () {
    
    this.classList.toggle(state);
    this.nextElementSibling.classList.toggle(state);
    
  };
});

for 遍历 vanilla javascript 中的元素 - 只有手风琴中的第一个元素有效

for loop over elements in vanilla javascript - only the first element in the accordion works

javascript

for-loop

foreach

accordion