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的轮播中订阅“幻灯片”事件，如下所示：

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

没有尝试上面的代码，但你应该得到方向： - ）

选择活动的bootstrap轮播项目

2 个答案: