手风琴 For Loop JS 选择器

Question

我试图通过让 for 循环索引充当配对机制，将 for 循环中引用 SVG 图标的对象数组连接到匹配内容数组。两个数组的日志都标识了所有相关对象，但是当我调用 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 变量，当循环完成时，它将等于acc.length。因此，当您单击并执行事件处理程序时，i 的值并不是您想要的。

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

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

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