Question

我在Jquery中创建了这段代码。

它工作正常但我正在努力实现这一点：我不想立即添加CLASS（在文档加载时），就像在这个例子中一样 INSTEAD 我会尝试完成以下：

首先单击选择 FIRST li tag 和 THEN 添加Class“active”。我希望实现与此Fiddle 相同的功能。（唯一的区别是我不希望第一个标签立即拥有CLASS，但是在点击按钮时添加一个CLASS。）有人可以帮助我吗？谢谢!!

$(document).ready(function() {
    $('ul li:first').addClass('active');
    $("button").click(function() {
        $('.active').removeClass('active').next('li').addClass('active')

    });
});

Answer 1

$(document).ready(function() {

    $("button").click(function() {
       if($('ul li.active').length==0)
           $('ul li:first-child').addClass('active');
       else
        $('.active').removeClass('active').next('li').addClass('active')

   });
});

在这里试试http://jsfiddle.net/KVLE6/2/

在这种情况下，您需要检查是否有任何具有活动类的项目。如果至少有一个，则删除并将其添加到下一个。如果没有，则将其添加到第一个。如果这就是你想要的，请告诉我

Answer 2

$("button").click(function() {
    var $active= $('.active');  
    if( !$active.length){
        $('ul li:first').addClass('active');
    }else{
        $active.removeClass('active').next('li').addClass('active');
    }
});

Answer 3

你应该做

$(document).ready(function() {
    //$('ul li:first').addClass('active');
    $("button").click(function() {
        if($('li.active').length > 0) {

            $('.active').removeClass('active').next('li').addClass('active');
        }else{
            console.log($('ul li:first'));
            $('ul li:first').addClass('active');
        }

    });

});

在这里摆弄http://jsfiddle.net/KVLE6/6/

Answer 4

$(document).ready(function() {
var i=0
$("button").click(function() {

    if(i > $("ul > li").length)
    {
       i=0;     
    }
    $("ul > li").siblings().removeClass('active');            
    $("ul > li:eq("+i+")").removeClass('active').addClass('active');
    i++;
});
});

小提琴示例：http://jsfiddle.net/KVLE6/25/

添加删除类Jquery

4 个答案: