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/

Answer 2

所以问题在于你的lessIn函数中的currentIndex。它只是找到VISIBLE元素的索引，而不是你所有元素中可见的FIRST li的索引，如果你看到我说的话。 @Richard D的回答看起来很好，但如果你想知道你的问题在哪里我相信它从那里开始

当链接越来越少时，使用Jquery列出项目显示/隐藏

2 个答案: