香草Javascript：如果我使用相同的切换类单击Y元素，则从X元素中删除切换类

我目前正在使用边栏菜单，在其中切换类别上的选定类，该类别具有classname边栏类别

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

---

删除所选类的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');
  }
}

---

假设您的目标环境支持ES2015，或者您通过传输代码来支持这样的环境，则可以使用以下代码实现声明性方法：

函数切换SelectedClassEvent{ Array.fromdocument.getElementsByClassName'sidebar-category' .filterelement=>element！==event.target .forEachelement=>{ 元素。类列表。删除“选定” setAttribute'aria-pressed'，false； }; event.target.classList.toggle'selected'； const pressed=event.target.getAttribute'aria-pressed'='true'； event.target.setAttribute'aria-pressed'，String！pressed； } .侧边栏类别{ 填充物：5px； } .选定{ 背景：蓝色； 颜色：白色； } 点击 点击 点击 点击

---

这可以通过JavaScript中的Events API实现

使用HTML元素的onClick=属性，我们可以构造一个切换系统

创建一个函数来处理用户的单击操作，并将已单击的元素作为参数传入。函数切换元素{…} 在该元素内部，首先触发一个事件，使用名为clearselected的事件清除所选元素，该事件将遍历元素并将selected属性设置为false。因此，在语义上取消选择元素。 将onclick处理程序中传递的元素的selected属性更改为true。 使用名为updateui的事件更新用户界面UI，该事件将选定元素更改为其所需的外观，并使用for循环将所有未选定元素更改为其所需的外观，该for循环迭代所有元素并查看选定属性。 下面我有一个代码片段，它使用普通JavaScript在UI上创建切换系统。它有一个非常基本的HTML，使用相同的类名，并添加很少的CSS，使演示更容易理解。我希望这就是你要找的东西

//在JavaScript中设置HTML元素 var sidebar=document.getElementsByClassNamesidebar[0]； var sidebarCategories=document.getElementsByClassNamesidebar-categories； //添加用于清除选定元素的事件侦听器 sidebar.AddEventListener，函数E{ forvar i=0；i

---

这不允许切换当前选定的项，就像在他最初的jQuery代码片段中一样。不过，我更喜欢addEventListener，而不是在生产代码中使用onclick属性。只需要少量的条件逻辑就可以达到预期的效果。谢谢，这样做了！谢谢你的帮助。我最终使用了@Barmar的解决方案，因为它的代码更简洁，并且与我已经编写的内容非常吻合。不客气，但是干净的代码意味着可读性和可维护性，而嵌套的for循环使用单字母变量并不干净。