javascript - Bootstrap Carousel缩略图边框无法自动更新。

当轮播转到下一张幻灯片时，缩略图上的边框应移至下一个缩略图以与该图像更改相对应。他们不。我在向.carousel-inner中添加一个关闭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');
 });

最佳答案

这是通过索引而不是所有字符串解析来实现的方式。

$('.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);
});

Demo

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

这是一个有趣的链接版本：

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

Demo 2