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 上调用，并且每当单击 next 和 prev 时。

于 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 回答