for循环遍历香草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);
    
  };
});