スライドごとに異なるテキストを切り替えます - ブートストラップカルーセル

Question

ブートストラップのカルーセルを使用して、スライドごとに異なるテキスト（およびキャプション）を切り替えたいと思います。私は別の質問からのこのjQueryコードの微調整をしていますが、これは正しい線または道に沿ってですか？

<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> 

ありがとうございます。

更新：このコメント/答えからコードを使用して動作します。

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

Answer 1

あなたの問題は

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

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

$(this)に常駐は'data-menu'属性を持っていない$('#carousel-example')に等しいです。

アクティブなスライドを見つけて、その'data-menu'属性を使用します。例えばので

：

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

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