jquery dotdotdot插件（添加省略号）不能使用Bootstrap轮播 [英] jquery dotdotdot plugin (adds ellipsis) not working with Bootstrap carousel

问题描述

我使用Bootstrap 3 carousel为我的Rails 4应用程序。要在旋转木马中截断更长的字幕，我使用的是jquery dotdotdot插件，它还在末尾添加了...。

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

为什么dotdotdot不会在轮播的所有字幕上执行？我试着使用轮播事件处理程序来执行插件每次轮播幻灯片，但此解决方案不适合，因为用户将看到完整的标题，在dotdotdot有机会执行之前的短暂时刻：

  $（'carousel'）。on（'slide.bs.carousel'，function（）{
 $（'。 dotdotdot'）。dotdotdot（{}）; 
}）; 
  

或者，如果有人可以推荐另一个截断多行字幕的解决方案，

问题是，因为它没有显示所有的项目，它不是应用程序 ... 在每个结尾处，隐藏的都不会激活。为了解决这个问题，我们将所有项目都设置为 active item ，以便显示它们，除了第一张幻灯片（或元素0）到 。要再次隐藏它们。所以我们可以添加：

  $（.active.item）.each（function（index）{
 if（index！= 0）{
 $（this）.removeClass（'active'）; 
} 
} 
  

现在我们已经通过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.

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

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.

解决方案

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.

Fiddle Here

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