1

私は次の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たとえば、2 番目のアイテムがアクティブな場合、色は青でなければなりません。以下は私のjQueryコードです：

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

機能していません。解決策はありますか？

4

2 に答える 2

1

少し単純化しましたが、これは私にとってはうまくいきます：

http://jsfiddle.net/2PWYJ/

if($('#carousel-2 .carousel-inner').children('.item').hasClass('active')) {
     $('.features-text').css('color', 'blue');
}
于 2013-06-04T18:24:19.553 に答える
0

次のように、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);
    });
});

上記のコードは試していませんが、方向性はわかるはずです:-)

于 2013-06-04T19:18:17.350 に答える