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添加類並用作選擇器？

回答

相關問題