在Bootstrap 3 Carousel中顯示每張幻燈片的不同內容

Question

我正在使用Bootstrap 3製作網站，並且我試圖在屏幕上顯示旋轉木馬中的某些幻燈片時顯示不同的文本。我的代碼如下...

<div class="row img-slider">  
<div class="col-md-10 col-md-offset-1"> 
    <div id="sticksCarousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
      <li data-target="#sticksCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#sticksCarousel" data-slide-to="1"></li> 
      <li data-target="#sticksCarousel" data-slide-to="2"></li> 
     </ol> 
     <section class="carousel-inner"> 
      <div class="item active"><img class="image1" src="img/slide1.png" alt="blah" style="width:100%;"></div> 
      <div class="item"><img class="image2" src="img/slide2.png" alt="blah" style="width:100%;"></div> 
      <div class="item"><img src="img/slide3.png" alt="blah" style="width:100%;"></div> 
     </section><!--carousel-inner--> 
<a href="#sticksCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"> </span></a> <a href="#sticksCarousel" class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
    </div><!--sticksCarousel--> 
    <p id="sticksCarouselMessage">HEY!</p> 
</div> 

的JavaScript：

<script type = "text/javascript"> 
$(document).ready(function() { 
    $('.carousel').carousel({ 
     interval: 4000 
    }); 
    $('#sticksCarousel').on('slid.bs.carousel', function() { 
     if ($('div.active img.image1')) { 
      $("#sticksCarouselMessage").text("It worked for Image 1 class!"); 
     } 
     if ($('div.active img.image2')) { 
      $("#sticksCarouselMessage").text("It worked for Image 2 class!"); 
     } else { 
      $("#sticksCarouselMessage").text(""); 
     } 
    }); 
}); 
</script> 

我試圖使用jQuery和顯示在#sticksCarouselMessage不同的文本選擇每個單獨的圖像。我知道這不是最有效的方法，如果您有任何建議，請告訴我。請記住我是jQuery的新手，但我正在努力學習。謝謝！

Answer 1

你的檢查是一個問題：

 if ($('div.active img.image1')) { 
      $("#sticksCarouselMessage").text("It worked for Image 1 class!"); 
     } 
     if ($('div.active img.image2')) { 
      $("#sticksCarouselMessage").text("It worked for Image 2 class!"); 
     } else { 
      $("#sticksCarouselMessage").text(""); //this will mostly always execute 
     } 

這裏只是檢查的對象是不夠的，因爲jQuery的沒有返回null /未定義如果對象沒有找到，它返回一個jQuery對象，它是truthy所以總是它會進入你的第一條件，如果條件設置文本，然後沒有其他條件，所以如果它不是圖像2，那麼它總是去其他的，並沒有設置任何東西。相反，試試這個方法：

var $msg = $("#sticksCarouselMessage"); //Cache the object here so you dont want to use it again 
$('#sticksCarousel').on('slid.bs.carousel', function() { 

    var text = "", $active = $('div.active'); //set initial value of the text, and cache active div 
    if ($active.has('img.image1')) { //find if active has image1 if so set the text 
     text = "It worked for Image 1 class!"; 
    } else if ($active.has('img.image2')) { //else find if active has image2 if so set the text 
     text = "It worked for Image 2 class!"; 
    } 

    $msg.text(text); //endof it set the message to the element with the text populated above 

}); 

Fiddle

你也可以把它簡化爲：

var arrMessages = ["It worked for Image 1 class!", //set your messages here in an array 
        "It worked for Image 2 class!", 
        "It worked for Image 3 class!"] 

var $msg = $("#sticksCarouselMessage"); 
$('#sticksCarousel').on('slid.bs.carousel', function() { 

    var text = "", 
     $active = $('div.active'), 
     index = $('div.item').index($active); //check the index of active item 

    $msg.text(arrMessages[index] || "Some Default text if nothing to display for this slide"); //fetch the value from array based on the index of the item and display. 

}); 

Fiddle

Answer 2

使用幻燈片編號（index）來更改消息，如：

var arrMessages = ["It worked for Image 1 class!", 
        "It worked for Image 2 class!", 
        "It worked for Image 3 class!"] 

/*initialization*/ 
$('#sticksCarouselMessage').text(arrMessages[0]); 
$('#sticksCarousel').carousel(); 
/**/ 


$("#sticksCarousel").on('slid.bs.carousel', function(evt) { 
$('#sticksCarouselMessage').text(arrMessages[$(this).find('.active').index()]); 
}); 

發現活躍指數：https://stackoverflow.com/a/18690905/1596547

參見：http://bootply.com/83418