問題描述

我正在為我的 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 輪播的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！