javascript - 利用 Bootstrap Carousel "slide"事件和 .next 类

标签 javascript jquery html twitter-bootstrap carousel

所以我遇到了一个小问题(类似于我前几天发布的这个问题:http://bit.ly/11JpbdY)在加载时隐藏的一段内容上使用 SlabText。这一次,我试图让 slabText 更新 slider 中某些内容的显示(使用 Twitter Bootstrap 的 Carousel 插件)。

根据 Twitter 的 Bootstrap 轮播插件文档 ( http://twitter.github.com/bootstrap/javascript.html#carousel ),我尝试使用 slide 事件,以便重新调用 SlabText 以使其正确显示。

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

我可以毫无问题地访问“slide”事件,但试图获取 .next 元素证明很麻烦。 这是到目前为止我的代码的 JSFiddle:http://jsfiddle.net/peHDQ/

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

如果有任何其他信息有用,请告诉我。


补充说明:

由于我一直无法获得 .next 类,所以我尝试使用一些 jQuery 来完成此操作。到目前为止,这是我的代码:

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

根据我的理解,这应该是获取每个 .slab 元素并触发 SlabText 插件....唉,我得到一个错误:

“未捕获的类型错误:对象 [object Object] 没有方法 'slabtext'”

谁能告诉我我在这里做错了什么......?我使用了完全相同的过程来添加一个类并且它工作正常(根据这个 JSFiddle:http://jsfiddle.net/peHDQ/2/)

最佳答案

我发现了问题。问题是在下一张幻灯片可见之前调用了事件“幻灯片”。我添加了一点延迟,现在工作正常。试试这个:

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

关于javascript - 利用 Bootstrap Carousel "slide"事件和 .next 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14886233/

相关文章:

javascript - 使用 Angular 确定表单是否有效

javascript - 使用 Angular UI Bootstrap 制作轮播表单

Javascript:解析一个txt文件,将数据传递给一个数组

javascript - 折叠函数参数的最佳方式是什么?

jQuery 选择器 : finding table cell based on content

javascript - 同位素插件初始加载动画

html - 折叠的 Bootstrap 3 导航栏超出范围(下拉菜单)

html - 为什么从 Blob 存储链接时不显示 SVG 图像?

javascript - 我可以使用 javascript 重定向触发事件吗?

javascript - 检查是否使用 jQuery 应用了 css