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

我对jQuery非常陌生，我有以下问题。因此，我想让jQuery在用户单击

li

元素时监听，如果该元素已经有

活动的类，那么它应该从函数返回。如果一个元素没有一个类
活动
，那么它应该向它添加一个类。因此，我想要的是在单击元素时添加类，但此时只有一个元素可以激活
类。但现在，我的代码正在为我单击的每个元素添加
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>



列表





（功能（）{
$（'.nav'）.children（'li'）.on（'click'，函数（）{
$this=$（this）；
if（$this.hasClass（'active'））{
返回0；
}否则{
$this.addClass（'active'）；
}
});
})();
试试这个

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

试试这个

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

试试这个

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

试试这个

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

像这样试试-

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

});

像这样试试-

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

});

像这样试试-

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

});

像这样试试-

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

});

你可以这样想，例如：

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

 })();

事件处理程序中的这个
仅引用触发事件的DOM元素（在我们的例子中，指向单击的li）。如果在回调函数中记录此
，您将看到它只引用一个li元素（单击该元素）：

（函数（）{
$（'.nav'）.children（'li'）.on（'click'，函数（）{
console.log（this）；//日志

//其他代码
})();
您可以这样做，例如：

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

 })();

事件处理程序中的
this
仅指触发事件的DOM元素（在本例中指单击的li）。如果在回调函数中记录
this
，您将看到它仅指一个li元素（已单击）：

（函数（）{
$（'.nav'）.children（'li'）.on（'click'，函数（）{
console.log（this）；//日志

//其他代码
})();
您可以这样做，例如：

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

 })();

事件处理程序中的
this
仅指触发事件的DOM元素（在本例中指单击的li）。如果在回调函数中记录
this
，您将看到它仅指一个li元素（已单击）：

（函数（）{
$（'.nav'）.children（'li'）.on（'click'，函数（）{
console.log（this）；//日志

//其他代码
})();
您可以这样做，例如：

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

 })();

事件处理程序中的
this
仅指触发事件的DOM元素（在本例中指单击的li）。如果在回调函数中记录
this
，您将看到它仅指一个li元素（已单击）：

（函数（）{
$（'.nav'）.children（'li'）.on（'click'，函数（）{
console.log（this）；//日志

//其他代码
})();
基本上，我们添加类并从所有同级中删除类

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

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

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

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

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

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

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

尝试t=$（this）；t.hasClass（'active'）和t.addClass（'active'）为什么要将赋值分配给
$this
，而不是直接使用
$（this）
？另外，您是否尝试过类似的方法：
！$（this）.hasClass（“active”）？$（this.addClass（“active”）：return 0；
您打算如何使用返回值？return语句完全是胡说八道，addClass只在类不存在时添加该类，因此您可以用
$（this.addClass（'active'）.sides（）.removeClass（'active'）替换所有代码。
！Try t=$（this）；t.hasClass（'active）和t.addClass（'active'））为什么分配给
$this
而不是直接使用
$（this）
？另外，您是否尝试过类似的方法：
！$（this）.hasClass（“活动”）？$（this.addClass（“活动”）：return 0；
您打算如何使用返回值？return语句完全是胡说八道，addClass只在类不存在时添加该类，因此您可以用
$（this.addClass（'active'）.sides（）.removeClass（'active'）替换所有代码。
！Try t=$（this）；t.hasClass（'active）和t.addClass（'active'））为什么分配给
$this
而不是直接使用
$（this）
？另外，您是否尝试过类似的方法：
！$（this）.hasClass（“活动”）？$（this.addClass（“活动”）：return 0；
您打算如何使用返回值？return语句完全是胡说八道，addClass只在类不存在时添加该类，因此您可以用
$（this.addClass（'active'）.sides（）.removeClass（'active'）替换所有代码。
！Try t=$（this）；t.hasClass（'active）和t.addClass（'active'））为什么分配给
$this
而不是直接使用
$（this）
？另外，您是否尝试过类似的方法：
！$（this）.hasClass（“活动”）？$（this.addClass（“活动”）：return 0；
以及您计划如何使用返回值？return语句完全是胡说八道，addClass仅在类不存在时添加该类，因此您可以将所有代码替换为
$（this）.addClass（'active'）.sides（）.removeClass（'active'）
！