jquery - 当点击的链接越来越少时，使用 Jquery 显示/隐藏列表项

Question

我有一个我想隐藏的大元素列表，然后一个名为#more 的按钮将播下 5 个。到目前为止，我能够显示更多，但是当我使用名为 #less 的按钮显示更少时，脚本卡住了。

以下是我的代码和fiddle too

HTML

<a href="#" id="more">more</a>
<a href="#" id="less">less</a>

<ul>
    <li>1</li>
    <li>2</li>
    ...
    <li>3</li>
</ul>

jQuery

jQuery(function($) {
    var visible = 7;
    $('ul li:gt('+(visible - 1)+')').hide();

$('#more').click(function() {
    if ($('ul li:visible:last').is(':last-child')) {
        return false;
    }

    var currentIndex = $('ul').children('li:visible:last').index(),
        nextIndex = currentIndex + (visible + 1);
    $('ul li').hide();
    $('ul li:lt(' + nextIndex + '):gt(' + currentIndex + ')').show();
});

$('#less').click(function() {
    if ($('ul li:visible:first').is(':first-child')) {
        return false;
    }

    var currentIndex = $('ul').children('li:visible:first').index();
    var prevIndex = (currentIndex - (visible + 1));

    $('ul li').hide();
    if(prevIndex == 0)
        $('ul li:lt(' + currentIndex + ')').show();
    else
        $('ul li:lt(' + currentIndex + '):gt(' + prevIndex + ')').show();
});
});

Answer 1

这会做我认为你想要的，而且它更干净，你做的 jQuery 调用比需要的多得多。

jQuery(function($) {
    var visible = 7, $lis = $('ul li'), max = $lis.length;        
    function showUpToIndex(index) {
        $lis.hide();
        $lis.slice(0, index).show();
    }

    showUpToIndex(visible);

    $('#more').click(function(e) {
        e.preventDefault();
        visible = visible + 5;
        if (visible > max) visible = max;

        showUpToIndex(visible);
    });

    $('#less').click(function(e) {
        e.preventDefault();
        visible = visible - 5;
        if (visible < 0) visible = 0;

        showUpToIndex(visible);
    });
});

http://jsfiddle.net/cUUfS/12/