javascript - Vanilla Javascript:如果单击具有相同切换类的Y元素，则从X元素中删除切换类

我目前正在使用侧边栏菜单，在其中切换类别为“ sidebar-category”的类别中的“ selected”类。

使用jQuery，我可以轻松实现自己的目标：切换“选定的”类（如果我单击另一个类别），则前一个类别将删除该类，然后将其应用于当前单击的类别：

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

我的问题是，对于该项目，我无法使用jQuery，而必须使用原始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');
  }
}

最佳答案

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