javascript - jQuery 隐藏和显示轮播中已经分开的文本

Question

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

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

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

这里有一些 hack 我需要重构(间隔是一个很大的数字以确保基于用户点击的图像切换，.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>隐藏和显示文本。查看图片。

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

我一直在思考的过程是我可以添加一个类和 display: none;到包含我要显示的描述性文本的 div。然后我可以简单地切换那个类(有条件的)每当我在 a 时添加一个类。被点击。

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

我需要一些建议。感谢您的关注和浏览!

---

更新

我想显示的文本没有反射(reflect)在屏幕截图中

<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