Question

在此代码中，我想在3个按钮后显示show more链接：我知道，如何显示x字后显示更多按钮，但如何显示按钮后显示更多链接？

这是我在x字后显示show more链接的代码，如果有帮助的话：

＆＃13;

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();    
    });

});

＆＃13;

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

＆＃13;

Answer 1

您可以使用jquery eq()和after()功能完成任务。

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

这是example

Answer 2

你可以使用jquery在前三个按钮之后添加一个显示更多链接，并将其余按钮移动到一个带有类的div并隐藏它。将eventlistener附加到显示隐藏按钮的链接。

＆＃13;

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();
        });
});

＆＃13;

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

＆＃13;

Answer 3

非常容易做到，如下所示： -

＆＃13;

.hide{
  display:none;
}

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

如何展示＆＃34;阅读更多＆＃34; 3个按钮后链接

3 个答案: