Отобразить разное содержимое на слайд в 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

Использование количества слайдов (индекс), чтобы изменить ваш сообщение, как:

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