Question

嗨，大家好，当用户点击指标或滑块箭头时，我很难添加/删除活动类的twitter bootstrap指标。任何人都可以帮我这个：

这是代码：

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

Here is jsFiddle

Here is working jsFiddle without swipe feature.

当然它可以使用数字，但是当用户点击任何箭头或滑动时，它只删除类而不添加指示符新的活动类。

搜索示例!!

Answer 1

这是一个有效的例子http://jsfiddle.net/nuxfxz1w/10/

您只需要绑定来自bootstrap carousel的滑动事件

$('#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

点击添加删除课程

2 个答案: