javascript - 为两个 anchor 标签添加事件类

Question

我有以下标记

<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>

这是我应用的javascript

var sidebar = document.querySelector(".sidebar");

for (var i = 0; i <= sidebar.length; i++) {
  sidebar.addEventListener("click", function() {
    this.classList.toggle('active');
  });
}

我想喜欢下面的截图

谢谢。

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');
  })
}

更好的是，直接迭代 as ，避免 for完全循环(和差一错误):

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

(虽然旧版浏览器不支持 NodeList.forEach，因此如果您使用此方法，请确保也进行了 polyfill)