Toggle verschiedenen Text für jede Folie - Bootstrap Karussell

Question

Mit Bootstrap Karussell Ich möchte verschiedene Text (sowie die Beschriftung) für jede Folie wechseln. Ich habe eine Änderung dieses jQuery-Codes, der von einer anderen Frage ist, aber ist das entlang der richtigen Linie oder weg?

<span class="toggle" id="first">FIRST TEST TEXT</span> 
<span class="toggle" id="second">SECOND TEST TEXT</span> 
<span class="toggle" id="third">THIRD TEST TEXT</span> 

<div class="carousel-container"> 
    <div id="carousel-example" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li id="indicator" data-target="#carousel-example" data-slide-to="0" class="active"></li> 
     <li id="indicator" data-target="#carousel-example" data-slide-to="1"></li> 
     <li id="indicator" data-target="#carousel-example" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active" data-menu="first"> 
     <div class="carousel-caption"> 
      <span class="caption-news">Some caption text.</span> 
      <button type="button" class="btn btn-secondary">Button</button> 
     </div> 
     </div> 
     <div class="item" data-menu="second"> 
     <div class="carousel-caption"> 
      <span class="caption-news">Some caption text.</span> 
      <button type="button" class="btn btn-secondary">Button</button> 
     </div> 
     </div> 
     <div class="item"> 
     <div class="carousel-caption" data-menu="third"> 
      <span class="caption-news">Some caption text.</span> 
      <button type="button" class="btn btn-secondary">Button</button> 
     </div> 
     </div> 
     <a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#carousel-example" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
    </div> 
    </div> 
</div> 
<script> 
    $(document).ready(function() { 
    $('.toggle').hide(); 
    $('#carousel-example').on('slide.bs.carousel', function() { 
     var menu = $(this).attr("data-menu"); 
     $('#' + menu).show(); 
    }) 
    }); 
</script> 

Danke.

Update: Dies funktioniert Code aus dem Kommentar/Antwort:

$(document).ready(function() { 
    $('.toggle').hide(); 
    $('#carousel-example').on('slide.bs.carousel', function() { 
    var menu = $(this).find('.item.active').data("menu"); 
    $('#' + menu).show(); 
    }) 
}); 

Answer 1

Ihr Problem liegt in

$('#carousel-example').on('slide.bs.carousel', function() { 

var menu = $(this).attr("data-menu"); 
$('#' + menu).show(); 
}) 

$(this) gleich $('#carousel-example') ist das nicht das 'data-menu' Attribut hat.

Was Sie wollen, ist die aktive Folie zu finden, dann verwenden Sie die 'data-menu' Attribut.

So zum Beispiel:

$('#carousel-example').on('slide.bs.carousel', function() { 

var menu = $(this).find('.item.active').attr('data-menu'); 
$('#' + menu).show(); 
})