添加和删除类的点击事件

Question

我正在处理一个点击事件，它最初是非常标准的。

on.click：从所有列表项中删除活动class，然后将活动添加到单击的列表项中。

即

var li = $('.child-item');
li.click(function(){
  li.removeClass('active');
  li.addClass('active');
});

按预期工作。但是，我还需要一个条件，如果再次单击活动 class，它将从单击的项目中删除活动 class。

我试过这个：

$('.child-item').toggle(function(e){
    
   $('.child-item').removeClass('active');
   $(this).addClass('active');

}, function() {
   $('.child-item').removeClass('active');
   $(this).removeClass('active');           
});

但切换通常处于关闭状态，因此需要双击才能使切换回到正轨。这似乎是一个非常简单的解决方案，但我似乎无法让它发挥作用。

Added a jsFiddle here with another option。这对于单击同一元素时很好，但它不会在每次单击时清除所有活动的 classes。

更新

我成功了，但 TrueBlueAussie 的回答更短更好。这是我的作品 fiddle： https://jsfiddle.net/v7b8cbj5/

Answer 1

var li = $('.child-item');
li.click(function(){
  li.removeClass('active');
  $(this).toggleClass('active');
});

Answer 2

您的第二个点击处理程序将仅在注册事件时附加到匹配的 "active" 项目。

全部替换为：

$('.child-item').click(function(e){
   $('.child-item.active').not(this).removeClass('active');    
    $(this).toggleClass('active');
});

您可以使用 not() 将当前项目从选定的要禁用的事物列表中排除，然后只需切换选定的事物。

JSFiddle: https://jsfiddle.net/81ex7dmm/2/

Answer 3

.toggle() (Event) - is deprecated in jQuery 1.8 and removed in jQuery 1.9

在 .active <li>

上使用 add() 和 toggleClass()

$('.child-item').click(function(e){
    $('li.child-item.active').add(this).toggleClass('active');
});

Updated Fiddle

Answer 4

也试试看：

$('.child-item').click(function(e){
   $('.child-item.active').removeClass('active');    
    $(this).addClass('active');
});

FIDDLE DEMO

添加和删除类的点击事件

adding and remove classes on click events

html

javascript

jquery

onclick

更新

添加和删​​除 类 的点击事件

adding and remove classes on click events

html

javascript

jquery

onclick

更新

添加和删除类的点击事件