截取段落前100個字符並隱藏段落的其餘內容顯示/隱藏其他鏈接的鏈接

Question

我有500多個字符的段落。我只想得到最初的100個字符並隱藏其餘部分。另外我想在100個字符旁邊插入「更多」鏈接。點擊更多鏈接整個段落應顯示和編輯文本「更多」到「更少」，並點擊「更少」它應該切換行爲。段落是動態生成的，我無法用.wrap（）包裝它的內容。這裏是我擁有的和我想要的例子。

這是我有：

<p>It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that 
    it has a more-or-less normal distribution of letters, as opposed to using 'Content 
    content here', making it look like readable English. Many desktop publishing packages 
    and web page editors now use Lorem Ipsum as their default model text.</p> 

這就是我想要什麼，當DOM加載

<p>It is a long established fact that a reader will be distracted by ..More</p> 

這就是我想要的東西，當用戶點擊 「更多」

<p>It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is that 
    it has a more-or-less normal distribution of letters, as opposed to using 'Content 
    content here', making it look like readable English. Many desktop publishing packages 
    and web page editors now use Lorem Ipsum as their default model text. ..Less</p> 

當我們點擊「較少」時，它應該恢復點擊「更多」所做的事情。

我正在使用jQuery來分割，切片並將子字符串換成跨度，我想要隱藏但是不起作用。

var title = $("p").text(); 
var shortText = jQuery.trim(title).substring(100, 1000).split(" ") 
    .slice(0, -1).join(" ") + "...More >>"; 
shortText.wrap('</span>'); 

Answer 1

小提琴：http://jsfiddle.net/iambriansreed/bjdSF/

的jQuery：

jQuery(function(){ 

    var minimized_elements = $('p.minimize'); 
    var minimize_character_count = 100;  

    minimized_elements.each(function(){  
     var t = $(this).text();   
     if(t.length < minimize_character_count) return; 

     $(this).html(
      t.slice(0,minimize_character_count)+'<span>... </span><a href="#" class="more">More</a>'+ 
      '<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+' <a href="#" class="less">Less</a></span>' 
     ); 

    }); 

    $('a.more', minimized_elements).click(function(event){ 
     event.preventDefault(); 
     $(this).hide().prev().hide(); 
     $(this).next().show();   
    }); 

    $('a.less', minimized_elements).click(function(event){ 
     event.preventDefault(); 
     $(this).parent().hide().prev().show().prev().show();  
    }); 

});​ 

Answer 2

你看過jQuery Truncator插件嗎？

它幾乎完全符合您所描述的內容。

Answer 3

這不是最好的谷歌結果，但我使用jQuery Expander plugin取得巨大成功。這很好，因爲它不會隱藏任何搜索引擎機器人。

Answer 4

它看起來像其他幾個人打我，但這裏是我想出了。

var MORE = "... More...", 
    LESS = " Less..."; 

$(function(){ 
    $("p").each(function(){ 
     var $ths = $(this), 
      txt = $ths.text(); 

     //Clear the text 
     $ths.text(""); 

     //First 100 chars 
     $ths.append($("<span>").text(txt.substr(0,100))); 

     //The rest 
     $ths.append($("<span>").text(txt.substr(100, txt.length)).hide()); 

     //More link 
     $ths.append(
      $("<a>").text(MORE).click(function(){ 
       var $ths = $(this); 

       if($ths.text() == MORE){ 
        $ths.prev().show(); 
        $ths.text(LESS); 
       } 
       else{ 
        $ths.prev().hide(); 
        $ths.text(MORE); 
       } 
      }) 
     ); 
    }); 
}); 

Answer 5

感謝@iambriansreed他不錯的功能，這裏有一個輕微的修改就行截段breakes：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
jQuery(function(){ 

var minimized_elements = $('p.minimize'); 
var maxLines = 20; 

minimized_elements.each(function(){  
    // var textArr = $(this).text().split(/\n/); // Not supported in IE < 9 
    var textArr = $(this).html().replace(/\n?<br>/gi,"<br>").split(/<br>/); 
    var countLines = textArr.length; 

    if (countLines > maxLines) { 
     text_less = textArr.slice(0, maxLines).join("<br>"); 
     text_more = textArr.slice(maxLines, countLines).join("<br>"); 
    } 
    else return; 

    $(this).html(
     text_less + '<span>... </span><a href="#" class="more">More</a>'+ 
     '<span style="display:none;">'+ text_more +' <a href="#" class="less">Less</a></span>' 
    ); 
}); 

$('a.more', minimized_elements).click(function(event){ 
    event.preventDefault(); 
    $(this).hide().prev().hide(); 
    $(this).next().show();   
}); 

$('a.less', minimized_elements).click(function(event){ 
    event.preventDefault(); 
    $(this).parent().hide().prev().show().prev().show();  
}); 

}); 

</script> 

Answer 6

大家誰到這裏來尋找節目更多... 這裏是另一個插件http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/