Jquery 添加 Class 并用作选择器？

Question

嘿，所以我真的不确定我做错了什么，

基本上我有一个按钮 'a#mobile_menu_btn'，我正在向它添加一个 class，'.active' 然后我想将其用作选择器，但它不起作用。

 $('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');
        
    });

我无法使用切换按钮，因为该按钮执行其他功能，所以我想保持简单，只在适当的时候使用添加/删除 class。

我试过各种写法 '$('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')

我哪里错了？提前致谢

Answer 1

当您动态添加时 class。

您需要使用 Event Delegation. You have to use .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');
    }
});

Jquery 添加 Class 并用作选择器？

Jquery add Class and use as selector?

jquery

html

selector

addclass

removeclass