利用Bootstrap Carousel"slide"滑动事件和.next类 [英] Utilise the Bootstrap Carousel "slide" event and the .next class

问题描述

所以我有一个小问题(类似于我前几天发布的一个问题: http://bit.ly /11JpbdY )，将SlabText用于加载时隐藏的内容上.这次，我试图获取slabText来更新滑块中某些内容的显示(使用Twitter Bootstrap的Carousel插件).

So I've got a little problem (similar to this one I posted the other day: http://bit.ly/11JpbdY) with using SlabText on a piece of content that is hidden on load. This time, I'm trying to get slabText to update the display of some content that is in a slider (using Twitter Bootstrap's Carousel plugin).

遵循Twitter的文档( http://twitter.github.com/bootstrap/javascript. html#carousel )作为Bootstrap的Carousel插件，我试图使用slide事件，以便我重新调用SlabText使其正确显示.

Following Twitter's documentation (http://twitter.github.com/bootstrap/javascript.html#carousel) for Bootstrap's Carousel plugin, I'm trying to use slide event so that I re-call SlabText to make it display correctly.

使用开发人员工具，我可以看到Carousel在处理一个.item元素到下一个元素的幻灯片时添加了一个.next类.然后在传输.active类之前将其删除.

Using developer tools I can see that Carousel adds a .next class as it processes the slide of one .item element to the next. This is then removed before the .active class is transferred.

我可以毫无问题地访问"slide"事件，但是试图掌握.next元素确实很麻烦. 到目前为止，这是我代码的JSFiddle: http://jsfiddle.net/peHDQ/

I can access the "slide" event without any issue, but trying to get hold of the .next element is proving troublesome. Here is a JSFiddle of my code thus far: http://jsfiddle.net/peHDQ/

简单地说一下我的问题；如何正确使用slide事件触发功能?

To put my question simply; how should I correctly use the slide event to trigger a function?

请让我知道是否还有其他有用的信息.

Please let me know if any additional information would be useful.

更多说明:

由于我一直无法掌握.next类，因此我正在尝试使用一些jQuery.到目前为止，这是我的代码:

As I've been unable to get hold of the .next class, I'm attempting to do this with some jQuery. Here is my code thus far:

$('.carousel').carousel({
    interval: 5000
}).on('slide', function (e) {
    $(this).find('.active').next().find('.slab').slabText();
});

据我了解，这应该抓住每个.slab元素并触发SlabText插件....a，我得到一个错误:

From what I understand this should be grabbing each .slab element and triggering the SlabText plugin.... alas I get an error:

未捕获的TypeError:对象[object Object]没有方法'slabtext'"

有人可以告诉我我在这里做错了什么吗...吗?我使用了完全相同的过程来添加类，并且效果很好(根据此JSFiddle:

Can anyone advise what I am doing wrong here...? I've used the exact same process to add a class and it works fine (as per this JSFiddle: http://jsfiddle.net/peHDQ/2/)

推荐答案

我确定了问题所在.问题是在显示下一张幻灯片之前调用了事件幻灯片".我增加了一点延迟，现在可以正常工作了.试试这个:

I identified the problem. The issue is that the event 'slide' is called before the next slide is made visible. I added a little delay, and it works fine now. Try this:

   $('.carousel').carousel({
       interval: 5000
   }).on('slide', function (e) {
       var xx = $(this);
       setTimeout(function() {
           xx.find('.active').next().find('.slab').slabText();
       } , 0);
   });

这篇关于利用Bootstrap Carousel"slide"滑动事件和.next类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！