jQuery隐藏并显示已经分开旋转木马的文本

Question

我花了大部分时间试图解决这个问题，现在我需要寻求帮助。

我有一个修改过的bootstrap轮播，当点击缩略图导航时会显示较大的拇指图像。拇指导航 -

<ul class="carousel-linked-nav" id="front_mktng_list_thumb">
          <li class="active front_mktng_thumbs"><a href="#1"><img class="htttp://link/to.jpg"></a></li>
          <li class="front_mktng_thumbs"><a href="#2"><img class="thumb_mktng_border" src="http://link/to/thumb.jpg"></a></li>
          <li class="front_mktng_thumbs"><a href="#3"><img class="thumb_mktng_border" src="http://link/to/thumb.jpg"></a></li>
          <li class="front_mktng_thumbs"><a href="#4"><img class="thumb_mktng_border" src="http://link/to/thumb.jpg"></a></li>
</ul>

轮播中显示的较大图像基于用户在导航中单击的内容 -

<div id="myCarousel" class="carousel slide carousel-fade">
  <div class="carousel-inner span6 image_mktng_border" id="front_mktng_image" > 
    <div class="active item"><img src="http://link/to/large.jpg"></div>
    <div class="item"><img src="http://link/to/large.jpg"></div>
    <div class="item"><img src="http://link/to/large.jpg"></div>
    <div class="item"><iframe width="630" height="330" src="http://www.youtube.com/embed/xW7AAKjDclQ" frameborder="0" allowfullscreen></iframe></div>
  </div>  
</div>

这里有一些黑客我需要重构（间隔是一个很高的数字，以确保根据用户点击切换图像，.stopPropagation不用于href等）。

  $('#myCarousel').carousel({
    interval: 444000,
    pause: true
  });

  $('.carousel-linked-nav > li > a').click(function() {
      var item = Number($(this).attr('href').substring(1));
      $('#myCarousel').carousel(item - 1);
      $('.carousel-linked-nav .active').removeClass('active');
      $(this).parent().addClass('active');
      return false;
  });

现在，我一直在花费大部分时间来获取一个描述性文本，以显示每个图像。基本上以相同的方式显示图像但不在旋转木马中，并使用相同的缩略图<a>来隐藏和显示文本。见图像。

我非常熟悉如何使用点击事件显示隐藏文字，但我不确定如何使其与现有轮播一起正常工作。

我一直在研究的思考过程是我可以为包含我想要显示的描述性文本的div添加一个类display: none;。然后，只要在点击a时添加一个类，我就可以简单地切换该类（带条件）。

我是否需要重构我的轮播以允许此行为（多个div操作）？ 我的思维过程/解决方案是否不正确？

我需要一些建议。感谢您的关注并看看！

---

更新

我想要显示的文字没有反映在屏幕截图中

<div class="row">
  <div class="offset2">
    <div id="first_description">Quick list everything town</div><br>
    <div id="second_description">View of what's been done, what's next and who we're waiting on.</div><br>
    <div id="third_description">Have people do thing for you without looking like a jerk</div><br>
    <div id="fourth_description">Here's how I muthloving use it</div><br>
  </div>
</div>

Answer 1

Tmacram，我并不感到惊讶，你发现这个问题很困难，因为twitter bootstrap文档完全不合适。

传递给slide和slid处理程序的事件对象允许使用表达式确定活动项：

$(event.target).find('.carousel-inner .active')

因此其指数在其他项目中：

$(event.target).find('.carousel-inner .active').index()

因此，您可以选择并显示相应的文本：

$('#myCarousel').on('slid', function(event) {
    var idx = $(event.target).find('.carousel-inner .active').index();
    msg($(".row .offset2 div").eq(idx).text());
}).trigger('slid');

其中msg()是用于在适当的容器中显示文本的函数。您需要编写自己的函数（如果尚未编写）。

在第一次幻灯片操作之前，需要

.trigger('slid')来显示初始轮播项目的文本。

DEMO （基于我在搜索后找到的演示分支）。

或者，您可能希望直接显示/隐藏文本div，而不是重复复制活动文本 - DEMO