addClass(）在jQuery的if子句中未按预期工作

addClass() not working as expected in if clause in jQuery

本文关键字：工作 子句 if jQuery addClass      更新时间：2023-09-26

我对jQuery很陌生，有以下问题。因此，我希望jQuery在用户单击li元素时侦听，如果该元素已经具有active类，则它应该从函数返回。如果一个元素没有active的类，那么它应该添加一个类。所以，我想要的是在点击该元素时添加类，但一次只有一个元素可以具有active的类。但现在，我的代码正在将active类添加到我单击的每个元素中。下面是代码：

<div class="container-fluid">
    <div class="col-sm-2">
        <ul class="nav nav-pills nav-stacked">
            <h3>Lists</h3>
            <hr class="divider">
            <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Work</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-plane"></span> Travel</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-book"></span> School</a></li>
        </ul>
    </div>
</div>
</div>
<script>
    (function () {
        $('.nav').children('li').on('click', function () {
            $this = $(this);
            if ( $this.hasClass('active') ) {
                return 0;
            } else {
                $this.addClass('active');
            }
        });
    })();
</script>

试试这个

    $(function(){
        $('.nav li').click(function () {
             $('.nav li').removeClass("active");    
             $(this).addClass("active");    
        });
   });

您可以这样做，例如：

(function () {
     $('.nav').on('click', 'li', function () {
         $(this).toggleClass('active')
             .siblings('li').removeClass('active');
     });
 })();

事件处理程序中的this仅指触发事件的DOM元素（在本例中指被单击的li）。如果你在回调函数中记录this，你会发现它只引用了一个li元素（点击）：

 (function () {
        $('.nav').children('li').on('click', function () {
            console.log(this); //logs <li class="active"> </li>
            //other code
    })();

这样试试吧-

$('.nav').children('li').on('click', function () {
   $('.nav').children('li').removeClass('active');
   $(this).addClass('active');
});

基本上，我们添加类并从所有同级中删除类。

(function () 
{
    $('.nav').on('click', 'li', function() 
    {
        $(this).addClass('active')
               .siblings('li')
               .removeClass('active');
    });
})();
相关文章：