Question

我对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>

Answer 1

试试这个

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

Answer 2

你可以这样做一些想法，例如：

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

Answer 3

试试这样 -

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

});

Answer 4

基本上我们添加了类并从所有兄弟中删除了类。

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

addClass（）在jQuery中的if子句中没有按预期工作

4 个答案: