點擊添加刪除類

Question

嗨，大家好，我在用戶點擊指標或滑塊箭頭時努力添加/刪除活動類的Twitter Bootstrap指標。 誰能幫我這個忙：

這是代碼：

$('.carousel-indicators  li, .carousel-control').on("click",function(){ 
$('.carousel-indicators li.active').removeClass("active");
$(this).addClass("active");

這是jsFiddle

這是沒有滑動功能的jsFiddle。

當前它可以與數字一起使用，但是當用戶單擊任何箭頭或滑動時，它僅刪除類，而無需添加指示器新的活動類。

搜索例如！

Answer 1

這是一個工作示例http://jsfiddle.net/nuxfxz1w/10/

您只需要綁定來自引導輪播的slid事件

$('#myCarousel').bind('slid', function () {

    $('.carousel-indicators .active').removeClass('active');
    var activeIndex = $('#myCarousel .item.active').index();
    $('.carousel-indicators li:eq(' + activeIndex + ')').addClass('active');

});

Answer 2

這是因為您在點擊處理程序中引用了此方法，因此將活動類設置為箭頭而不是數字。

您可以執行另一個單擊處理程序來單擊箭頭，如下所示：

$('.carousel-control').click( function(){
    var $next;
    if( this.dataset.slide === "prev"){
        $next = $('.carousel-indicators li.active').prev();
        if( $next[0] === undefined) $next = $('.carousel-indicators li').last();     
    } else {
        $next = $('.carousel-indicators li.active').next();
        if( $next[0] === undefined) $next = $('.carousel-indicators li').first();           
    }

     $('.carousel-indicators li.active').removeClass("active");
    $next.addClass("active");

});

我已經更新了您的小提琴，請在此處查看： JSFiddle