Question

使用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();
  })
});

Answer 1

您的问题在于

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

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

$(this)等于$('#carousel-example')，其中没有'data-menu'属性。

您想要的是找到活动幻灯片，然后使用其'data-menu'属性。

例如：

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

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

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

1 个答案: