多段落，只有一个阅读更多按钮，以显示全部

Question

这段代码循环浏览所有段落，并在其末尾添加一个查看更多按钮。我希望它只显示第一段的前几个单词，如果单击“查看更多”，则显示所有段落。我尝试删除每个循环，试图将其包装到一个div并获得.html（），然后将其切割但无济于事。我会很高兴有一个想法指向正确的方向。

更新：也许我不够清楚：只有一个在第一段的前十个字符的末尾看到更多按钮。如果你点击它，它会显示所有段落的全部内容。

请不要插件。

jQuery(function(){ 
 

 
    var minimized_elements = $('p'); 
 
    
 
    minimized_elements.each(function(){  
 
     var t = $(this).text();   
 
     if(t.length < 100) return; 
 
     
 
     $(this).html(
 
      t.slice(0,100)+'<span>... </span><a href="#" class="more">More</a>'+ 
 
      '<span style="display:none;">'+ t.slice(100,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();  
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<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> 
 

 
<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> 
 

 
<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>

Answer 1

我已经在你的代码的一些变化。可能这是你想要什么：

jQuery(function(){ 
 

 
    var minimized_elements = $('p'); 
 
    var counter = 1; 
 
    minimized_elements.each(function(){  
 
    if(counter==1){ 
 
     $(this).addClass("first"); 
 
     var t = $(this).text();   
 
      if(t.length < 100) return; 
 
      
 
      $(this).html(
 
       t.slice(0,100)+'<span>... </span><a href="#" class="more">Show</a>'+ 
 
       '<span style="display:none;">'+ t.slice(100,t.length)+' <a href="#" class="less">Hide</a></span>' 
 
      ); 
 
    } else{ 
 
     $(this).hide(); 
 
    } 
 
     counter++; 
 
    }); 
 
    
 
    $('a.more', minimized_elements).click(function(event){ 
 
     event.preventDefault(); 
 
     $(this).hide().prev().hide(); 
 
     $(this).next().show(); 
 
     $('p').show();   
 
    }); 
 
    
 
    $('a.less', minimized_elements).click(function(event){ 
 
     event.preventDefault(); 
 
     $(this).parent().hide().prev().show().prev().show(); 
 
     $('p').not('.first').hide(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<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> 
 

 
<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> 
 

 
<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>

Answer 2

你的代码运行，但我试图找出你的问题，所以，我编辑你到

jQuery(function(){ 

    var minimized_elements = $('p'); 


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

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

     $(this).find('a').click(function() { 
      if ($(this).is('.more')) { 
       $(sefl).find('.hidden').show(); 
       $(sefl).find('.more').hide(); 
      } else if ($(this).is('.less')) { 
       $(sefl).find('.hidden').hide(); 
       $(sefl).find('.more').show(); 
      } 
     }); 

    }); 


}); 

Demo