Jquery 引导转盘的问题

我使用的引导转盘有问题。我正在使用我在Bootply上找到的一个示例，它使用缩略图导航来选择哪个图像是可见的。我遇到的问题是，一旦条目id增加到两位数，jQuery中的子字符串行就会阻止它正确显示。我猜是因为它切断了一个数字

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

// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('#myCarousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});

我不太确定我哪里出了问题，如果有任何帮助，我将不胜感激

---

下面是整个Bootply链接：

问题是您的html div

即将提前发布。您应该在最后一次

div之后关闭它

编辑：

单击一个拇指后，如何调整幻灯片编号也存在问题。只需将数据幻灯片编号属性添加到每个li，如下所示：

<li> 
   <a id="carousel-selector-1"  data-slide-number="1">
       <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
   </a>
</li>

---

链接：

这并不能解决问题。尝试单击示例中的13，您将看到相应的幻灯片不会显示。它显示了三个，你是对的。在如何调整幻灯片编号方面也存在问题。我已经更新了我的答案。这仍然不起作用。现在唯一可选择的是第三十个，它现在可以工作了。正如我所说，您需要将

数据幻灯片编号

属性添加到每个li，然后在单击事件中使用

$（this.attr（'data-slide-number'）

来获取id（我刚刚将

数据幻灯片编号

属性添加到前三个元素）。检查我的帖子，我已经更新了。

// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){

  var id = $(this).attr('data-slide-number');

  id = parseInt(id);
  $('#myCarousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});