多段落，只有一個閱讀更多按鈕，以顯示全部

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