Question

这是完整的代码，当我尝试通过在循环内调用类名来尝试使用时，我在js代码上遇到的问题是行不通的，我不明白为什么当我单击第一个手风琴时它返回3时变量不返回0。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    /*
     * var panel = this.nextElementSibling; 
     *it works but i want to get panel by classname
     */
    panel = document.getElementsByClassName("panel")[i];
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>

Answer 1

欢迎stackoverflow。

因此，回答您的问题，由于您的循环计数器i变量没有作用域，因此无法正常工作。

它在您代码的全局范围内hoisted，并且将始终具有值3，因为其值在循环结束时具有。

要解决此问题，您只需执行以下操作：

for(let i = 0; i < acc.length; i++){
   //your code
}

使用let或const时，变量的作用域是作用域。 let document

如何在for循环中使用类名获取节点？

1 个答案: