我有一个我尝试使用Bootstrap Carousel和KnockoutJS显示的任务列表。用户可以使用控件(箭头)查看所有可用任务。在上面我想显示当前可见任务的索引(li)。
<ul id="slidercontent" class="carousel-indicators" data-bind="foreach: Tasks">
<li data-target="#taskCarousel" data-bind="attr: { 'data-slide-to': $index }"></li></ul>
我的控件在div之外,但效果很好。
<div class="tasks-carousel-controls">
<!-- ko if: $root.Tasks().length > 1 -->
<a class="left icon-chevron-left" href="#taskCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right icon-chevron-right" href="#taskCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<!-- /ko -->
</div>
然后我有另一个div,我说哪个是任务的索引,比如Y&#39;中的X,其中X是我当前的索引,Y是我的可观察数组的长度。< / p>
我认为最好的解决方案是绑定一些observable,其值是class =&#39; active&#39;但我没有成功:/
答案 0 :(得分:-1)
你尝试过这样的事吗?
$('body').on('click', '.tasks-carousel-controls a', function() {
var slideIdx = $('#taskCarousel').find('.active').index();
$('#divId').html('Slide '+slideIdx+' out of 5');
});
其中taskCarousel是你的bootstrap轮播的id,divId是你想要显示索引的div的id。