如何添加“阅读更多”链接与jQuery中的很多段落？

Question

我有一个内容DIV与许多段落。 这就是它的标记的外观，

<div class="more"> 
    <p>Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p> 
    <p>That an extinct one-tonne relative of the ncisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p> 
    <p>Extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. </p> 
</div> 

现在我需要添加一个链接‘阅读更多’一旦人物达到的<div class="more"> 300。而且我想将此链接显示为切换。

只是我试过用jQuery，但我无法弄清楚它正确。

这是我的jQuery -

var showChar = 300; 
var ellipsestext = "..."; 
var moretext = "more"; 
var lesstext = "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 + '</span>&nbsp;&nbsp;<a 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; 
}); 

JS FIDDLE与目前的jQuery

希望有人可以帮助我。谢谢。

Answer 1

像这样将有助于保持<p>，并有300个字符数。

var showChar = 300; 
 
\t var ellipsestext = "..."; 
 
\t var moretext = "more"; 
 
\t var lesstext = "less"; 
 
\t $('.more').each(function() { 
 
\t var content = $(this).html(); 
 
\t var textcontent = $(this).text(); 
 

 
\t if (textcontent.length > showChar) { 
 

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

 
\t  var html = '<span class="container"><span>' + c + '</span>' + '<span class="moreelipses">' + ellipsestext + '</span></span><span class="morecontent">' + content + '</span>'; 
 

 
\t  $(this).html(html); 
 
     $(this).after('<a href="" class="morelink">' + moretext + '</a>'); 
 
\t } 
 

 
\t }); 
 

 
\t $(".morelink").click(function() { 
 
\t if ($(this).hasClass("less")) { 
 
\t  $(this).removeClass("less"); 
 
\t  $(this).html(moretext); 
 
     $(this).prev().children('.morecontent').fadeToggle(500, function(){ 
 
      $(this).prev().fadeToggle(500); 
 
     }); 
 
     
 
\t } else { 
 
\t  $(this).addClass("less"); 
 
\t  $(this).html(lesstext); 
 
     $(this).prev().children('.container').fadeToggle(500, function(){ 
 
      $(this).next().fadeToggle(500); 
 
     }); 
 
\t } 
 
     //$(this).prev().children().fadeToggle(); 
 
\t //$(this).parent().prev().prev().fadeToggle(500); 
 
\t //$(this).parent().prev().delay(600).fadeToggle(500); 
 
\t 
 
\t return false; 
 
\t });

.morecontent { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="more"> 
 
    <p>Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guins 30cm incisors 
 
    like tusks.</p> 
 
    <p>That an extinct one-tonne relative of the ncisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative guinea picm incisors like tusks.</p> 
 
    <p>Extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks. Based on a study of its skull, scientists say that an extinct one-tonne relative of the guinea pig probably used its 30cm incisors like tusks.</p> 
 
</div>

编辑：代码段更新 - 增加淡入淡出效果与<a href="morelink">外容器

Answer 2

这是你如何acheive JSFIDDLE

var content = $(this).text(); 
//var content = $(this).html(); 

如果浏览器中发现的任何HTML标记突破则其自动与相关标签封闭：</p>。

Answer 3

可能是下面的代码片段将帮助您：

$(document).ready(function(){ 


      var showChar = 300; 
      var ellipsestext = "..."; 
      var moretext = "more"; 
      var lesstext = "less"; 
      var h = ""; 
      var content = $(".more").text(); 

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

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

       $(".more").html(html); 
       $('.morecontent').hide(); 
      } 

     $(".morelink").click(function() 
     { 
      if($(this).hasClass("less")) 
      { 
       $('.more').remove(h); 
       $(this).removeClass("less"); 
       $(this).html(moretext); 
      } 
      else 
      { 
       $('.more').append(h); 
       $(this).addClass("less"); 
       $(this).html(lesstext); 
      } 

      $(this).parent().prev().toggle(); 
      $(this).prev().toggle(); 
      return false; 
     }); 

});