Question

有一个自动更改的bootstrap轮播：

<div id="carousel">
  <div class="active"> </div>
  <div class="">       </div>
  <div class="">       </div>
  <div class="">       </div>
</div>

一次只有一个div设置为活动状态，它会循环显示如何将所有旋转木马的孩子绑定到另一个元素，以便它可以将其特定的孩子设置为活动。

例如：

<div id="copy-cat">
  <li class=""> </li>
  <li class=""> </li>
  <li class=""> </li>
  <li class=""> </li>
</div>

<div id="carousel">
  <div class="active"> </div>
  <div class="">       </div>
  <div class="">       </div>
  <div class="">       </div>
</div>

如何绑定copy-cat以使同一个子活动为carousel？请记住，我不想复制所有类属性 - 只检测一个属性是活动的，并将同一个编号的子项设置为活动状态。

Answer 1

Bootstrap轮播有一些你可以利用的事件。

有关活动的信息可在Carousel documentation下的“活动”部分找到。

我建议做类似的事情：

<div id="copy-cat">
    <div id="copy-1" class="active"></div>
    <div id="copy-2" class=""></div>
    <div id="copy-3" class=""></div>
    <div id="copy-4" class=""></div>
</div>
<div id="carousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active" data-transition-to="#copy-1">
            <p>something1</p>
        </div>
        <div class="item" data-transition-to="#copy-2">
            <p>something2</p>
        </div>
        <div class="item" data-transition-to="#copy-3">
            <p>something3</p>
        </div>
        <div class="item" data-transition-to="#copy-4">
            <p>something4</p>
        </div>
    </div>
</div>

按事件部分中的说明添加侦听器，并检查relatedTarget。

使用data-transition-to找出要添加active类的类。

Javascript支持这种方法：

$('#carousel').carousel({
    interval:false //or whatever options you want
});

$('#carousel').on('slide.bs.carousel',function (event) {
    $('#copy-cat .active').removeClass('active');
    $(event.relatedTarget.dataset.transitionTo).addClass('active');
});

$('#carousel').carousel('next');

这是the fiddle ...我禁用了过渡＆amp;你必须检查DOM才能看到copy-cat div正在被更改。

Answer 2

给定元素x，您可以通过调用x在其父.children()中获取x.index()的索引。在您的示例中，$("div.active").index()将返回0，后面的div将返回1，等等。所以您应该能够执行以下操作：

$("#copy-cat :nth-child("+(1+$("#carousel div.active").index()) + ")").addClass("active");

（nth-child是基于1索引的，因此您需要添加1.您还可以调用基于0的eq()。）

请参阅this jsFiddle以获取粗略的示例。

但这只是一个普遍的答案。如果有用于此目的的Bootstrap方法，请务必使用它们。

Answer 3

我使用Bootstrap的slid事件回调：

http://jsfiddle.net/isherwood/6xF7k/

$('#carousel').on('slid.bs.carousel', function () {
    // get the index of the currently active panel
    var myIndex = $(this).find('div.active').index();

    // set the element with that index active, deactivating the others
    $('#copy-cat').find('li').removeClass('active').eq(myIndex)
        .addClass('active');
})

请注意，我已将#copy-cat更改为ul以使其成为有效的HTML。

http://getbootstrap.com/javascript/#carousel-usage

如何将一个元素的每个子元素绑定到另一个元素的子元素？

3 个答案: