javascript - onclick 没有按预期工作

Question

我有一个脚本，可以在单击时展开 Accordion 菜单。我使用 getElementsByClassName 选择所需的菜单项

window.onload = function() {
 var acc = document.getElementsByClassName("accordion_f");
 //  var acc = document.querySelectorAll(".accordion_f");
 var i; 

// test code start
 acc[10].classList.toggle("active");
 acc[10].nextElementSibling.classList.toggle("show");
// test code end

 for (i = 0; i < acc.length; i++) {
   acc[i].onclick = function(){
//        acc[i].classList.toggle("active");
   this.classList.toggle("active");
//        acc[i].nextElementSibling.classList.toggle("show");
   this.nextElementSibling.classList.toggle("show");
   }
 }
};  

不幸的是，onclick 不会触发，我不确定我做错了什么。我使用

测试了 getElementsByClassName

acc[10].classList.toggle("active");
acc[10].nextElementSibling.classList.toggle("show");

这可以正常工作，所以 getElementsByClassName 可以正常工作我也尝试使用 document.querySelectorAll 这也有效

我试过使用它，但 acc[i] 似乎都不起作用。但我感觉这不是问题，因为当我检查 html 元素并检查事件时，我没有看到在当前元素上注册任何事件处理程序。

我的 html 看起来像这样:

<button class="accordion_f">24/7 Activity Tracking</button>
<div class="panel">
      <p>Tracks your daily activity at five intensity levels for 24 hours a day, seven days a week, and provides a complete picture of all of your activity. It counts your active time, daily burnt calories, steps, distance from steps and sleep.</p>
</div>

所以总而言之，为什么这样做有效:

 acc[10].classList.toggle("active");
 acc[10].nextElementSibling.classList.toggle("show");

但这不起作用，甚至无法在元素上注册

   acc[i].onclick = function(){

更新

我的 Accordion 菜单位于 Tab 菜单内，它有自己的 JavaScript 来更改标签:

var newHTML = document.getElementById(newTab).innerHTML;
document.getElementById('first_View').innerHTML = newHTML;

我将 Accordion 菜单移到了 Tab 菜单之外，并且 onclick 起作用了。如果我从选项卡菜单脚本中注释掉上面的代码，我的 Accordion 菜单可以工作，但选项卡菜单不会改变。

使用 addEventListener 代替 onclick 进行进一步测试:

window.onload = function() {
  var acc = document.getElementsByClassName("accordion_f");
  var i; 

// test code start
  acc[10].classList.toggle("active");
  acc[10].nextElementSibling.classList.toggle("show");
// test code end

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener('click', expand_m, false); 
  } 
};  

function expand_m(){      
   this.classList.toggle("active");
   this.nextElementSibling.classList.toggle("show");
}

这与上面的原始 onclick 代码完全相同，当我检查 html 元素并检查事件时，我发现当前元素上没有注册任何事件处理程序，所以点击对我不起作用，除非我停止 innerHTML 更改.

如有任何帮助，我们将不胜感激。

Answer 1

您应该为点击时发生的函数提供 i 的引用:

window.onload = function() {
  var acc = document.getElementsByClassName("accordion_f");

  for (var i = 0; i < acc.length; i++) {
    acc[i].onclick = (function(index) {
      return function() {
        acc[index].classList.toggle("active");
        acc[index].nextElementSibling.classList.toggle("show");
      }
    })(i);
  };
};

.accordion_f {
  display: block;
}

.panel {
  display: none;
}

.show {
  display: block !important;
}

<button class="accordion_f">24/7 Activity Tracking</button>
<div class="panel">
  <p>Tracks your daily activity at five intensity levels for 24 hours a day, seven days a week, and provides a complete picture of all of your activity. It counts your active time, daily burnt calories, steps, distance from steps and sleep.</p>
</div>
<button class="accordion_f">24/7 Activity Tracking</button>
<div class="panel">
  <p>Tracks your daily activity at five intensity levels for 24 hours a day, seven days a week, and provides a complete picture of all of your activity. It counts your active time, daily burnt calories, steps, distance from steps and sleep.</p>
</div>
<button class="accordion_f">24/7 Activity Tracking</button>
<div class="panel">
  <p>Tracks your daily activity at five intensity levels for 24 hours a day, seven days a week, and provides a complete picture of all of your activity. It counts your active time, daily burnt calories, steps, distance from steps and sleep.</p>
</div>