标识符“i”已被声明为问题

Question

我尝试为显示内容做一个手风琴，我在 mi js 代码上遇到了这个问题，我确信这是一个很容易解决的问题，但我现在看不到它，我需要帮助才能看到它。

JS代码：

var acc = document.getElementsByClassName("servicon-button");
var i;


for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

我的 html 这个：

<button class="servicon-button"> <img src="icons/computer.svg" alt=""> </button>
<div class="panel">

Answer 1

尝试在for loop内声明i变量，将变量放在 for 循环内可确保该变量仅在循环内使用，这是一件好事，如果将其放在外面，它将与代码中的其他变量混合可能导致重新分配或重新声明变量等问题的全局范围

const acc = document.getElementsByClassName("servicon-button");

for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    const panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

旁注： var不是真的推荐，使用const和let代替

Answer 2

不要在循环之前声明var i ，而是在for循环中声明它，如下所示： for (let i = 0; i < acc.length; i++) {...这就是错误的来源。