如何在3個按鈕後顯示「更多閱讀」鏈接

Question

在此代碼中，我想顯示show more鏈接，3個按鈕之後： 我知道，如何在x詞後顯示更多按鈕，但如何顯示更多鏈接按鈕後？

這是我的代碼顯示在x話show more鏈接，如果它可以幫助：

jQuery(function(){ 
 

 
    var minimized_elements = $('span.showmore'); 
 
    
 
    minimized_elements.each(function(){  
 
     var t = $(this).text();   
 
     if(t.length < 410) return; 
 
     
 
     $(this).html(
 
      t.slice(0,410)+'<span>... </span><a href="" class="more">Show More</a>'+ 
 
      '<span style="display:none;">'+ t.slice(410,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.1.1/jquery.min.js"></script> 
 

 
<button class="playtrailer">Trailer 1</button> 
 
<button class="playtrailer">Trailer 2</button> 
 
<button class="playtrailer">Trailer 3 HD</button> 
 
<button class="playtrailer">Trailer 4 SD</button> 
 
<button class="playtrailer">Trailer 5</button> 
 
<button class="playtrailer">Trailer 6</button> 
 
<button class="playtrailer">Video</button>

Answer 1

很容易做到象下面這樣： -

$(document).ready(function(){ 
 
    $("button.playtrailer").eq(2).after('<a href="#" id="particular">Show More</a>');//add a unique id to link 
 
    $("button.playtrailer:gt(2)").addClass('hide'); 
 
}); 
 

 
$(document).on('click','a#particular',function(e){ 
 
    e.preventDefault(); 
 
    $(this).addClass('hide'); 
 
    $('button.playtrailer').removeClass('hide'); 
 
});

.hide{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="playtrailer">Trailer 1</button> 
 
<button class="playtrailer">Trailer 2</button> 
 
<button class="playtrailer">Trailer 3 HD</button> 
 
<button class="playtrailer">Trailer 4 SD</button> 
 
<button class="playtrailer">Trailer 5</button> 
 
<button class="playtrailer">Trailer 6</button> 
 
<button class="playtrailer">Video</button>

Answer 2

您可以使用jQuery eq()和after()功能的任務。

$(document).ready(function() { 
    $("button.playtrailer").eq(2).after('<a>Read More</a>'); 
}); 

這裏是一個example

Answer 3

你可以使用jQuery後前三個按鈕添加一個顯示更多的鏈接和按鈕的其餘部分與一類移動到一個div並隱藏它。附加一個eventlistener到顯示隱藏按鈕的鏈接。

jQuery(function(){ 
 
     var playButtons = $('.playtrailer'); 
 
     $(playButtons[2]).after('<a id="show-more" href="#">Show more</a>'); 
 
     $(playButtons[2]).after('<div class="more-buttons"></div>'); 
 
     for (var i=3; i<playButtons.length; i++){ 
 
      $(playButtons[i]).detach(); 
 
      $(playButtons[i]).appendTo('.more-buttons'); 
 
     } 
 
     $('.more-buttons').hide(); 
 
     $("#show-more").click(function(){ 
 
      $('.more-buttons').toggle(); 
 
      $(this).toggle(); 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="playtrailer">Trailer 1</button> 
 
<button class="playtrailer">Trailer 2</button> 
 
<button class="playtrailer">Trailer 3 HD</button> 
 
<button class="playtrailer">Trailer 4 SD</button> 
 
<button class="playtrailer">Trailer 5</button> 
 
<button class="playtrailer">Trailer 6</button> 
 
<button class="playtrailer">Video</button>