Jquery添加类并用作选择器？

基本上我有一个按钮，“A＃mobile_menu_btn”这我增加了类，“主动”，然后我想用作选择器，但它不起作用。

$('a#mobile_menu_btn').click(function() { 
 
     $('a#mobile_menu_btn').addClass('active'); 
 
     $('#mobile_nav').addClass('expand'); 
 
    }); 
 

 
$('a#mobile_menu_btn.active').click(function() { 
 
     $('#mobile_nav').addClass('expand'); 
 
     $('a#mobile_menu_btn').removeClass('active'); 
 
     
 
    });

我无法使用肘，作为按钮执行其他功能，所以我想保持简单，只需要使用添加/删除类的适当时候。我试过了各种各样的'$（'a＃mobile_menu_btn'）;包括： ;

$('a#mobile_menu_btn.active') 
 
$('a#mobile_menu_btn .active') 
 
$('span#mobile_menu_btn.active') 
 
$('div#mobile_menu_btn.active') 
 
$('a#mobile_menu_btn.active')

我要去哪里错了？在此先感谢

来源

2015-03-02 Anthony

达到同样的事情，你为什么要使用一个类选择，当你已经有一个id？ – 2015-03-02 15:44:25

请注意，当你设置'$（'a＃mobile_menu_btn.active'）。click（'，该按钮还没有激活，它没有'.active'类（点击时它会得到它）所以这个指令并没有做任何事情 – 2015-03-02 15:48:40

这是一个非常好的例子，说明如何不在jQuery中处理切换功能，你应该做的只是保留第一个事件处理程序并用'toggleClass'切换类，这就是为什么它在那里 – adeneo 2015-03-02 15:48:54

当您正在动态添加类。

您需要使用Event Delegation。您必须使用委托事件方法使用.on()。

常规语法

$(document).on(event, selector, eventHandler);

理想情况下，你应该用最接近的静态容器更换document有更好的表现。

$(document).on('click', 'a#mobile_menu_btn.active', function() { 
    $('#mobile_nav').addClass('expand'); 
    $('a#mobile_menu_btn').removeClass('active'); 
});

但是你并不需要事件委托，你可以使用.hasClass()

$('a#mobile_menu_btn').click(function() { 
    if($(this).hasClass('active')){ 
     $(this).removeClass('active'); 
    }else{ 
     $(this).addClass('active'); 
    } 
});

来源

2015-03-02 15:44:50 Satpal

额外的解释：'$（'a＃mobile_menu_btn.active'）。click（）'将绑定文档中当前为**的所有'a＃mobile_menu_btn.active'元素上的click事件。这意味着如果稍后添加类（使用jQuery），click事件将不会绑定到这个新元素。使用'.on（）'它绑定所有当前元素**和未来**元素上的事件稍后添加。 – 2015-03-02 15:55:41

Jquery添加类并用作选择器？

回答

相关问题