用jquery顯示更多文本

我正在尋找一種方式來顯示更多或更少的文本。我想在默認情況下顯示600個字符，如果單擊顯示更多字符，它將顯示600多個字符，然後再次單擊顯示600個字符，直到沒有更多字符。我還希望顯示更少的按鈕將文本摺疊回其默認的600個字符。我有5000頁以上的頁面，這將使閱讀更容易，並使其看起來更好。現在我正在使用它來顯示前600個字符，點擊時會顯示更多的字符，它會一路擴展。用jquery顯示更多文本

$(document).ready(function() { 
var showChar = 600; 
var ellipsestext = "..."; 
var moretext = "View more"; 
var lesstext = "View less"; 
$('.more').each(function() { 
    var content = $(this).html(); 

    if(content.length > showChar) { 

     var c = content.substr(0, showChar); 
     var h = content.substr(showChar-1, content.length - showChar); 

     var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '&nbsp;&nbsp;</span><a rel="nofollow" href="" class="morelink">'+moretext+'</a></span>'; 

     $(this).html(html); 
    } 

}); 

$(".morelink").click(function(){ 
    if($(this).hasClass("less")) { 
     $(this).removeClass("less"); 
     $(this).html(moretext); 
    } else { 
     $(this).addClass("less"); 
     $(this).html(lesstext); 
    } 
    $(this).parent().prev().toggle(); 
    $(this).prev().toggle(); 
    return false; 
}); 
});

可能有人請編輯該代碼這樣的工作或幫助我實現這個任何其他方式？我真的想讓我的頁面更具有可讀性和可讀性，這肯定會有訣竅。謝謝。

來源

2011-01-22 chris

聲音像分頁更合適，作爲用戶，我會發現這種功能有點煩人，只是我的意見。 – jondavidjohn 2011-01-22 14:30:16

嗯，我想這樣，所以我可以在一個頁面上顯示更多的內容，並有更多的實例顯示更多，這將使事情看起來不錯。如果是在一個頁面上的單個文章，我可以看到它很煩人。我會看看這個分頁，但我想到了一些JavaScript或jQuery的某種無限循環或文本上的東西會工作。我從來沒有見過這樣的功能。 – chris 2011-01-22 14:40:59

這不會很慢嗎？無論如何，爲什麼要使用角色？用箱子的高度來做它會容易得多。您可以將其滑動至每次展開。（我有點贊同其他人的看法，聽起來像是一個奇怪的解決方案，內容是王道，不要把它藏起來） – plebksig 2011-01-22 15:31:25

我敲了下面的代碼向你展示如何從有關行數的觀衆獲取信息：

的HTML：

<div style="height: 6em; overflow: auto; line-height: 1.5em"> 
    <p> Number of lines to display (optional) <input type="text" value="4" style="width: 3em"><button type="button" class="scrollLength">change</button></p> 
    <p> 
     This is a huge load of text<br> 
     line 2<br> 
     line 3<br> 
     line 4<br> 
     ...etc.... 
    </p> 
</div>

jQuery代碼：

$('button.scrollLength').each(function(){ 
    var $this = $(this); 
    $this.click(
     function(){ 
      var myParent  = $this.parent(); 
      var numberOfLines = myParent.children('input').attr('value'); 
      var displayArea = myParent.parent(); 
      if (numberOfLines > 0) { 
       var lineHeight = displayArea.css('lineHeight'); 
       var heightUnits = lineHeight.replace(/[0-9]./g, ''); 
       displayArea.css({height: (numberOfLines * parseFloat(lineHeight)) + heightUnits}); 
      } 
     } 
    ); 
});

Regards Neil

來源

2011-01-22 17:50:27 Neil

請查看以下鏈接 -

http://plugins.learningjquery.com/expander/index.html#getting-started

http://viralpatel.net/blogs/2010/12/dynamically-shortened-text-show-more-link-jquery.html

http://shakenandstirredweb.com/240/jquery-moreless-text

來源

2011-01-22 14:11:05 Alpesh

爲什麼做這一切的時候，你可以做或多或少你想要的東西通過把文本中一個div有滾動條。您根本不需要任何JavaScript，只需使用CSS對其進行設置即可。

<div style="height: 6em; overflow: auto; line-height: 1.5em"> 
    <p> 
     This is a huge load of text<br> 
     line 2<br> 
     line 3<br> 
     line 4<br> 
     ...etc.... 
    </p> 
</div>

只需設置「高度」（在上面的例子6EM）至1.5倍數要在任一個時刻顯示的行（例如，對於大約40行設置「高度：60em」）。

這樣你也可以處理這樣一個事實，即第600個字符幾乎肯定會在一個字的中間！

問候尼爾

來源

2011-01-22 15:56:22 Neil

用jquery顯示更多文本

回答

相關問題