1

jqueryを使用してリスト項目の数を制限しようとしている以前の投稿に取り組んでおり、リストの最後に達したときに次/前のリンクを非表示にする必要があります。これは単純な追加であると確信していますが、この機能を拡張する解決策が見つからないようです。

関数は次のとおりです：（Jquery list show / hide 5 items onclickからコピー）

$('ul li:gt(4)').hide();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide()
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});

これがjsfiddleです：http://jsfiddle.net/JQq5n/61/

リストの最後を説教されたときに、次/前のリンクを非表示にするのに助けが必要です。誰もこれを以前にやったことがありますか？

4

3 に答える 3

1

ここにフィドルがありますhttp://jsfiddle.net/RNrgE/1/

$('ul li:gt(4)').hide();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    if(first.prevAll().length < 6){
         $('.prev').hide();   
    }
    first.prev().nextAll().hide();
    $('.next').show(); //Now there must be items below so make sure the next link is visible
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    if(last.nextAll().length < 6){ //We've reached the end so hide the links
        $('.next').hide();
    }
    $('.prev').show(); //Now there must be items above so make sure the prev link is visible
    last.next().prevAll().hide(); 
});
于 2013-03-27T14:43:25.133 に答える
0

この更新されたデモを試してください。

次のケースと前のケースの両方で表示するアイテムが残っていない場合は、前のリンクと次のリンクを非表示にします。

function doShowNextPrev(){
    if($('ul li:first').is(':visible'))
        $('.prev').hide();
    else
        $('.prev').show();    

    if($('ul li:last').is(':visible'))
        $('.next').hide();
    else
        $('.next').show();    
}

次のリンクと前のリンクを表示するかどうかを確認するための次の楽しみを追加しました。上記の fun は、doReady で呼び出す必要があり、次と前がクリックされるたびに呼び出す必要があります。

于 2013-03-27T14:48:49.517 に答える
0 
$('ul li:gt(4)').hide();

updateButtons();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide();
    updateButtons();    
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
    updateButtons();    
});

function updateButtons () {
    var list$ = $('ul');
    $('.prev, .next').show();
    if (list$.children('li:first').is(':visible')) {
        $('.prev').hide();
    }
    if (list$.children('li:last').is(':visible')) {
        $('.next').hide();
    }
}
于 2013-03-27T14:56:32.640 に答える