-1

我正在使用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 新手，但我正在努力学习。谢谢！

4

2 回答 2

1

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

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

于 2013-09-26T17:54:15.317 回答
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 条件设置文本然后没有 else 条件因此，如果它不是图像 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

});

小提琴

您还可以将其简化为：

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.

});

小提琴

于 2013-09-26T02:42:28.877 回答