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

Question

我目前正在使用侧边栏菜单，在其中切换类别为“ 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');
  }
}

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

Answer 2

假设您的目标环境支持ES2015（或您将代码转换为支持这种环境），则可以通过以下代码实现使用Array.from ， filter和forEach的声明性方法：

 function toggleSelectedClass(event) { Array.from(document.getElementsByClassName('sidebar-category')) .filter(element => element !== event.target) .forEach(element => { element.classList.remove('selected') element.setAttribute('aria-pressed', false); }); event.target.classList.toggle('selected'); const pressed = event.target.getAttribute('aria-pressed') === 'true'; event.target.setAttribute('aria-pressed', String(!pressed)); } 

 .sidebar-category { padding: 5px; } .selected { background: blue; color: white; } 

 <div onclick="toggleSelectedClass(event)"> <button type="button" class="sidebar-category selected" aria-pressed="true">Click</button> <button type="button" class="sidebar-category" aria-pressed="false">Click</button> <button type="button" class="sidebar-category" aria-pressed="false">Click</button> <button type="button" class="sidebar-category" aria-pressed="false">Click</button> </div> 

注意： getElementsByClassName返回一个HTMLCollection 而不是一个数组，因此使用数组方法filter和forEach需要Array.from 。

注意2：在设计此类菜单时，请牢记可访问性。 https://inclusive-components.design/toggle-button/是一个很好的参考。

Answer 3

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

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

1. 创建一个函数来处理用户的单击动作，并将已单击的元素作为参数传入。 function toggle(element){...}
2. 首先在该元素内部触发一个事件，以使用名为clearselected的事件清除选定的元素，该事件将遍历元素并将selected属性设置为false。 因此，在语义上取消选择元素。
3. 将在onclick处理程序中传递的元素的selected属性更改为true。
4. 使用名为updateui的事件更新用户界面（UI），该事件将选定的元素更改为其所需的外观，并使用for循环遍历所有元素并查看selected属性，将所有未选择的元素更改为其所需的外观。

在下面，我有一个使用香草JavaScript在UI上创建切换系统的代码段。 它有一个非常基本的HTML，它使用相同的类名，并添加了很少的CSS，以使演示更易于理解。 我希望这是您想要的东西！

 // Set up the HTML elements in JavaScript var sidebar = document.getElementsByClassName("sidebar")[0]; var sidebarCategories = document.getElementsByClassName("sidebar-category"); // Add an event listener for clearing the selected elements sidebar.addEventListener("clearselected", function(e) { for(var i = 0; i < sidebarCategories.length; i++){ sidebarCategories[i].selected = false; } }, false); // Add an event listener updating the UI to reflect changes sidebar.addEventListener("updateui", function(e) { for(var i = 0; i < sidebarCategories.length; i++){ var current = sidebarCategories[i]; if(current.selected){ current.textContent = "selected"; }else{ current.textContent = ""; } } }, false); // Write a on click handler to handle the toggle function toggle(element){ var event = document.createEvent("Event"); event.initEvent("clearselected", true, true); element.dispatchEvent(event); element.selected = true; var event = document.createEvent("Event"); event.initEvent("updateui", true, true); element.dispatchEvent(event); } 

 .sidebar-category { width: 100px; height: 100px; border: 3px solid black; margin-bottom: 10px; line-height: 100px; text-align: center; } 

 <div class="sidebar"> <p>Click the boxes to see the toggle in action</p> <div class="sidebar-category" onclick="toggle(this)"></div> <div class="sidebar-category" onclick="toggle(this)"></div> <div class="sidebar-category" onclick="toggle(this)"></div> </div>