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

时间:2019-07-12 22:20:50

标签: javascript html css toggle

我目前正在侧边栏菜单上工作,在这里我可以切换类别为“ 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');
  }
}

3 个答案:

答案 0 :(得分: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');
  }
}

答案 1 :(得分:1)

假设您的目标环境支持ES2015(或您将代码转换为支持这样的环境),则可以使用以下代码实现使用Array.fromfilterforEach的声明性方法:

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不是一个数组,因此需要Array.from才能使用数组方法{ {1}}和filter

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

答案 2 :(得分:0)

这可以通过JavaScript中的事件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>