0

underscore.jsを使用して、 paginate変数を反復処理し、それぞれのリンク数を表示するテンプレートを設計しました。コードは次のとおりです。

<% var paginate= 10 %>

<table>
    <tr>
        <td><a href="">&lt;</a></td>
        <% for(var i=0; i < paginate; i++){ %>

            <td>
                <a class="someclass" href="<%= i%>"><%= i%></a>
            </td>

        <% }%>
        <td><a href="">&gt;</a></td>
    </tr>
</table>

呼び出し後にこの結果が得られます：

ここに画像の説明を入力してください

リンクを5つのチャンクで表示したい。「<01234>」または「<456 789>」のように。

jQueryを使用して5つだけを表示し、残りを非表示にするにはどうすればよいですか？お知らせ下さい。

4

1 に答える 1

1

このソリューションをご覧ください。これはデモ ソリューションです。要件に合わせて改善できます。

var slide  = 0;
$('.page:gt(4)').hide();
$('.prev').hide();
if(len < 5) {
    $('.next').hide();
}

$('.prev a').on('click', function(e){
    e.preventDefault();

    slide--;
    var heigher= slide * 5 + 5;
    var lower = slide * 5;

    $('.page:gt(' + (heigher-1) + ')').hide();
    $('.page:lt(' + (heigher) + '):gt(' + (lower) + ')').show();
    $('.page:eq(' + (lower) + ')').show();

    if(slide == 0){
        $('.prev').hide();
    }
    if(len > 5){
        $('.next').show();
    }
});

$('.next a').on('click', function(e){
    e.preventDefault();

    var lower = slide * 5 + 5;
    slide++;
    var heigher = slide * 5 + 5;

    $('.page:lt(' + lower + ')').hide();
    $('.page:lt(' + (heigher) + '):gt(' + (lower-1) + ')').show();

    if(heigher >= len){
        $('.next').hide();
    }
    $('.prev').show();
});

ここに更新ソリューションがあります。これには、はるかに優れたjQueryコードがあると思います。

于 2012-10-09T13:09:06.870 に答える