javascript - Vanilla Javascript : Remove toggle class from X element if I click on Y element with the same toggle class

Question

我目前正在开发一个侧边栏菜单，在该菜单中我切换类别上的“选定”类别，该类别的类别名称为“sidebar-category”。

使用 jQuery，我可以轻松实现我想要的目标:切换“选定”类后(如果我单击另一个类别)，先前的类别将被删除，然后应用于当前单击的类别:

$('.sidebar-category').click(function() {
  $(".sidebar-category").not(this).removeClass("selected");
  $(this).toggleClass('selected');
});

我的问题是，对于这个元素，我不能使用 jQuery，而必须使用 vanilla Javascript。

到目前为止，我可以轻松实现切换，但我不确定在使用普通 Javascript 单击另一个类别时如何删除该类。这是我当前的代码:

var selectCategory = document.getElementsByClassName('sidebar-category');

for (var i = 0, l = selectCategory.length; i < l; i++) {
  selectCategory[i].onclick = function() {
  this.classList.toggle('selected');
  }
}

Answer 1

删除selected类的jQuery代码相当于一个循环。所以只需在事件监听器中编写该循环即可。

var selectCategory = document.getElementsByClassName('sidebar-category');

for (var i = 0, l = selectCategory.length; i < l; i++) {
  selectCategory[i].onclick = function() {
    for (var j = 0; j < l; j++) {
      if (selectCategory[j] != this) {
        selectCategory[j].classList.remove("selected");
      }
    }
    this.classList.toggle('selected');
  }
}