选择活动引导轮播项目

Question

我有以下的html

<div id="carousel-2" class="carousel slide">
   <div class="carousel-inner" >
     <div class="item active">
       <img src="img/slide-2.jpg" alt="">
     </div>
     <div class="item">
       <img src="img/slide-3.jpg" alt="">
    </div>
  </div>
</div>

<div class="features-text">
Pellentesque egestas dignissim accumsan. Vivamus vitae lacinia orci.
</div>

我想要将features-text颜色更改为不同的颜色，例如，当第二个项目处于活动状态时，颜色应为蓝色。下面是我的jQuery代码：

if($('#carousel-2 .carousel-inner').find('.item').eq(1).hasClass('active')) {
    $('.features-text').css('color', 'blue');
}

它不起作用。有什么解决方案吗？

Answer 1

我对它进行了一些简化，但这对我来说很有效：

http://jsfiddle.net/2PWYJ/

if($('#carousel-2 .carousel-inner').children('.item').hasClass('active')) {
     $('.features-text').css('color', 'blue');
}

Answer 2

您可以在Bootstrap的carousel中订阅"slid“事件，如下所示：

$(function() {
    var $carousel = $('#carousel-2'),
        $items = $carousel.find('.item'),
        $text = $('.features-text');

    $carousel.on('slid', function() {
        var index_ = $items.index($items.filter('.active')),
            newColor = 'red';

        switch(index_) {
            case "0":
                newColor = 'blue';
                break;
            case "1":
                newColor = 'red';
                break;
        }
        $text.css('color', newColor);
    });
});

我没有尝试上面的代码，但是你应该知道方向:-)