javascript - 标识符 'i'已被声明问题

Question

我尝试做一个 Accordion 来显示内容，我在 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循环内声明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