引导旋转木马边框不自动更新。

Question

当旋转木马转到下一张幻灯片时，缩略图上的边框应该移动到下一个缩略图，以对应于该图像的更改。他们不知道。当我在. carousel内部添加一个闭包div时发现了这个错误，它导致我的旋转木马在上一张幻灯片之后崩溃。这是密码。

HTML

          <div class="carousel-inner">
            <div class="active item" data-slide-number="0">
              <img src="img/100325-01.jpg" class="img-responsive" alt="Regional Open Space Comparison" />
                 <div class="carousel-caption"><p></p>
                   <div class="photo-credit"><p>Photo Credit:<br />Media: Please submit high-resolution image requests to</p>
                   </div>
                 </div>                     
            </div>
            <div class="item" data-slide-number="1">
              <img lazy-src="img/100325-02.jpg" class="img-responsive" alt="Ecological Analysis" />
                <div class="carousel-caption"><p></p>
                  <div class="photo-credit"><p>Photo Credit: <br />Media: Please submit high-resolution image requests to</p>
                  </div>
                </div>             
             </div>
           </div>

CSS

  .carousel-selector > .active, .selected img {
   border: solid 2px #003C30;
   }

JS

$('#myCarousel').carousel({
interval: 13000
});

 // handles the carousel thumbnails
 $('.carousel-selector').click(function () {
  var selectorIdx = $(this).closest('li').index();

$('#myCarousel')
  .carousel(selectorIdx)
  .find('.carousel-selector').removeClass('selected')
  .eq(selectorIdx).addClass('selected')
  .end()
  .find('.item').removeClass('selected')
  .eq(selectorIdx).addClass('active');
 });

Answer 1

下面是通过索引(而不是所有字符串解析)来实现它的方法。

$('.carousel-selector').click(function () {
    $('#myCarousel').find('.carousel-selector').removeClass('selected');

    var selectorIdx = $(this).addClass('selected').closest('li').index();

    $('#myCarousel').find('.item').removeClass('selected')
        .eq(selectorIdx).addClass('selected');

    $('#myCarousel').carousel(selectorIdx);
});

演示

注意，1)我向每个控件元素添加了类，2)删除了前一个/下一个控件，因为它们与单个控件重叠。

下面是一个有趣的链接版本：

$('#myCarousel')
      .carousel(selectorIdx)
      .find('.carousel-selector').removeClass('selected')
      .eq(selectorIdx).addClass('selected')
      .end()
      .find('.item').removeClass('selected')
      .eq(selectorIdx).addClass('active');

演示2