手风琴循环 JS 选择器

Question

我试图通过让 for 循环索引充当配对机制，将 for 循环中引用 SVG 图标的对象数组连接到匹配内容数组。 Array 的日志都标识了所有相关对象，但是当我调用 panel[i] 更改时，我得到 panel[i] 未定义？ acc[i] 似乎在 for 循环中工作得很好。我如何确保 acc[i] 事件侦听器与其相应的索引位置面板配对，然后控制面板上的 css 将显示从隐藏更改为阻止？

谢谢！

const acc = document.querySelectorAll(".fas.fa-plus-circle.fa-3x");
const panel = document.querySelectorAll(".panel");
let i;
console.log(acc);
console.log(panel);
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    console.log(panel[i]);
    if (panel[i].style.display === "block") {
      panel[i].style.display = "none";
    } else {
      panel[i].style.display = "block";
    }
  });
}

Answer 1

因为你在for循环外声明了i，所以只有一个i变量，当循环有完全的。因此，当您单击并执行事件处理程序时，i 的值不是您想要的值。

要解决这个问题，请将 i 设为块范围变量：

for (let i = 0; i < acc.length; i++) {

现在循环的每次迭代都有自己的 i 变量，该变量将保留其值。会有一个 i 是 0，另一个是 1，...等等。因此，事件处理程序将各自访问具有预期值的权利 i。

手风琴循环 JS 选择器

Accordion For Loop JS Selector

javascript

arrays

for-loop

accordion