时间戳

首页 > 解决方案 > Vanilla Javascript：如果我单击具有相同切换类的 Y 元素，则从 X 元素中删除切换类

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

问题描述

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

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

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

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

到目前为止，我可以轻松实现切换，但我不确定如何在使用 vanilla 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');
  }
}

标签： javascripthtmlcsstoggle

解决方案

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

推荐阅读