jquery dotdot 插件(添加省略号)不适用于 Bootstrap 轮播 [英] jquery dotdotdot plugin (adds ellipsis) not working with Bootstrap carousel

问题描述

我正在为我的 Rails 4 应用程序使用 Bootstrap 3 轮播.为了截断轮播中较长的字幕，我使用了 jquery dotdotdot 插件，该插件还在末尾附加了...".虽然该插件适用于轮播中的第一张图片，但不适用于后续图片.

I'm using the Bootstrap 3 carousel for my Rails 4 application. To truncate longer captions in the carousel, I'm using the jquery dotdotdot plugin which also appends "..." at the end. While the plugin works for the first image in the carousel, it doesn't work for subsequent images.

这是 jsfiddle:http://jsfiddle.net/michaelvli/GD3JH/9/

Here's the jsfiddle: http://jsfiddle.net/michaelvli/GD3JH/9/

为什么 dotdotdot 没有在轮播的所有字幕上执行?我尝试使用轮播事件处理程序在每次轮播滑动时执行插件，但此解决方案不适合，因为在 dotdotdot 有机会执行之前，用户会在短时间内看到完整的标题:

Why is dotdotdot not executing on all captions of the carousel? I've tried using a carousel event handler to execute the plugin every time the carousel slides but this solution isn't suitable as the user will see the full caption for a brief moment before dotdotdot has had a chance to execute:

$('.carousel').on('slide.bs.carousel', function () {
    $('.dotdotdot').dotdotdot({});
});

或者，如果有人可以推荐另一种解决方案，即截断多行字幕，同时在末尾附加..."，那也很棒.

Alternatively, if somebody can recommend another solution that truncates multi-line captions while appending a "..." to the end, that would be great too.

推荐答案

问题在于，由于它没有显示所有项目，因此没有在每个项目的末尾应用 ...，那些隐藏没有激活.为了解决这个问题，我们将所有项目都设置为 active item 类，以便显示它们，然后将除第一张幻灯片(或元素 0)之外的所有项目切换到 item.再次隐藏它们.所以我们可以添加这个:

The problem is that since it is not showing all items it's not applying the ... at the end of each, the ones hidden are not activating. To solve this we have all items to be the class active item so they are shown then switch all but the first slide (or element 0) to item. To hide them again. So we can add this:

$( ".active.item" ).each(function( index ) {
    if(index != 0){
        $(this).removeClass('active');
    }
});

现在我们所有的项目都受到点点的影响.

Now we have all the items affected properly by the dotdotdot.

小提琴这里

这篇关于jquery dotdot 插件(添加省略号)不适用于 Bootstrap 轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！