Question

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

旋转木马滑动后实现事件的功能是：

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

我希望在特定幻灯片滑动后触发事件。我尝试了类似$('#myCarousel li[data-slide-to=1]').bind('slid', function() ...的东西，但它没有注册。

感谢任何帮助，谢谢。

Answer 1

您可以在相应的事件上设置事件处理程序，然后根据哪个幻灯片.current选择执行任何操作。例如，当幻灯片1循环时触发一些javascript：

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

从快速测试来看，这似乎不起作用，除非它附加到旋转木马上方的元素（如果你有一个以上的旋转木马，你还需要改变一些东西）。

编辑：快速查看之后，如果绑定到轮播本身，上述原因不起作用的原因是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），只是为了确保事情按照你期望的方式运行。

在Twitter Bootstrap的Carousel中发射事件

1 个答案: