在Twitter Bootstrap's Carousel中触发事件

Firing events in Twitter Bootstrap's Carousel

本文关键字：Carousel 事件 Twitter Bootstrap      更新时间：2023-09-26

一旦旋转木马滑动，我想添加一个值到ID myCarousel之外的输入。

在旋转木马滑动时实现一个事件的函数如下:

$('#myCarousel').bind('slid', function() {
  $('input[name=linkOnly]').val('Test')
}

我想在特定幻灯片滑动时触发一个事件。我试过$('#myCarousel li[data-slide-to=1]').bind('slid', function() ...之类的东西，但它没有注册。

任何帮助，感谢。

您可以在适当的事件上设置事件处理程序，然后根据哪个幻灯片是.current选择执行任何操作。例如，当slide 1循环进入:

时触发一些javascript
$(document).on("slid", function(event) {
  if ($(event.target).find(".active").data("slide-to") == 1) {
    // do stuff
  }
});

从一个快速的测试，这似乎不工作，除非它附加到旋转木马上方的元素(你也需要改变一些东西，如果你有多个旋转木马)。

EDIT:快速查看后，如果绑定到carousel本身，上述内容不起作用的原因是active类直到触发slid事件之后才添加(似乎如果处理程序添加到父元素，则active类在slid事件冒泡时添加)。您可以通过使用setTimeout来延迟触发行为来解决这个问题(即使使用0的超时也可以工作):

$("#myCarousel").on("slid", function(event) {
  var carousel = $(event.target);
  setTimeout(function() {
    if (carousel.find(".carousel-indicators .active").data("slide-to") === 1) {
      // do stuff
    }
  }, 0);
});

额外的代码是否值得取决于你，尽管它可能更稳定一点。它甚至可能值得放入一个小延迟(而不是0)，只是为了确保事情按照您期望的方式工作。

相关文章：