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

Question

我目前正在开发侧边栏菜单，我在该菜单中切换类别的 "selected" class，该类别的名称为 class "sidebar-category".

使用 jQuery 我可以轻松实现我想要的目标：切换 "selected" class 后（如果我单击另一个类别），上一个类别获得 class移除并应用于当前点击的类别：

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

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

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

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

去掉selectedclass的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 and 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 returns一个HTMLCollection，不是一个数组，所以Array.from 需要使用数组方法 filter 和 forEach.

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

Answer 3

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

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

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

下面我有一个代码片段，它使用 vanilla JavaScript 在 UI 上创建一个切换系统。它有一个非常基本的 HTML，使用相同的 class 名称并添加很少的 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>

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

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

html

javascript

css

toggle