为每张幻灯片切换不同的文本 - Bootstrap 轮播答案

【问题标题】：Toggle different text for each slide - Bootstrap carousel为每张幻灯片切换不同的文本 - Bootstrap 轮播
【发布时间】：2016-08-17 19:14:00
【问题描述】：

使用 Bootstrap 的轮播，我想为每张幻灯片切换不同的文本（以及标题）。我正在调整这个来自另一个问题的 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();
  })
});

【问题讨论】：

var menu = $(this).data("menu");试试这个。

标签： jquery twitter-bootstrap text toggle carousel

【解决方案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();
})

【讨论】：

如前所述 .data("menu");和 .find('.item.active') 解决了这个问题。感谢您的详细解释。