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 / undefined，它会返回一个真实的jquery对象，所以它总是进入你的第一个if条件设置文本然后有没有其他条件，所以如果它不是图像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

使用幻灯片编号（索引）更改您的信息，例如：

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

在Bootstrap 3 Carousel中显示每张幻灯片的不同内容

2 个答案: