为两个锚标记添加活动类

Question

我有以下标记

return QWidget::event(event);

这是我申请的javascript

<div class="sidebar">
  <a href=""><i class="fa fa-pencil"></i> Edit Profile <span><i class="fa fa-chevron-right"></i></span></a>
  <a href=""><i class="fa fa-cog"></i> Account Settings<span><i class="fa fa-chevron-right"></i></span></a>
</div>

我想在屏幕截图后喜欢这个

感谢。

Answer 1

如果您想要集合元素，请使用.querySelectorAll。 .querySelector仅返回第一个匹配元素。另外，请务必测试i < sidebars.length而不是i <= sidebars.length。

var as = document.querySelectorAll(".sidebar > a");
for(let i = 0; i < as.length; i++){
  as[i].addEventListener("click", function(){
      this.classList.toggle('active');
  })
}

更好的是，直接迭代，完全避免for循环（以及逐个错误）：

document.querySelectorAll(".sidebar > a").forEach(a => {
  a.addEventListener("click", () => {
      a.classList.toggle('active');
  });
});

（旧浏览器不支持NodeList.forEach，所以如果你使用这种方法，请确保也填充）