20

我有一个无序列表：

<ul id="myList"></ul>
<div id="loadMore">Load more</div>

我希望用另一个 HTML 文件中的列表项填充此列表：

<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>

我想加载前 3 个列表项，然后在用户单击“加载更多”div 时显示接下来的 5 个项目：

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#loadMore').click(function () {
        $('#myList li:lt(10)').show();
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});

不过我需要帮助，因为我希望“加载更多”以显示接下来的 5 个列表项，但如果 HTML 文件中有更多列表项，则再次显示“加载更多”div 并允许用户显示下一个5 个项目，重复此操作，直到显示整个列表。

我怎样才能最好地做到这一点？

我创建了以下 jsfiddle：http: //jsfiddle.net/nFd7C/

4

3 回答 3

55

警告：size()在 jQuery 1.8 中已弃用并在 jQuery 3.0 中删除，请.length改用

工作演示：http: //jsfiddle.net/cse_tushar/6FzSb/

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});


新的 JS显示或隐藏加载更多和显示更少

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

CSS

#showLess {
    color:red;
    cursor:pointer;
    display:none;
}

工作演示：http: //jsfiddle.net/cse_tushar/6FzSb/2/

于 2013-07-19T02:39:37.720 回答
14

简单，几乎没有变化。并且在加载整个列表时更多地隐藏加载。

jsFiddle在这里。

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#showLess').hide();
    var items =  25;
    var shown =  3;
    $('#loadMore').click(function () {
        $('#showLess').show();
        shown = $('#myList li:visible').size()+5;
        if(shown< items) {$('#myList li:lt('+shown+')').show();}
        else {$('#myList li:lt('+items+')').show();
             $('#loadMore').hide();
             }
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});
于 2013-07-19T02:57:20.100 回答
8

jQuery3 中不推荐使用表达式 $(document).ready(function()。

在此处查看使用jQuery 3 的工作小提琴

考虑到我没有包括无显示按钮。

这是代码：

JS

$(function () {
    x=3;
    $('#myList li').slice(0, 3).show();
    $('#loadMore').on('click', function (e) {
        e.preventDefault();
        x = x+5;
        $('#myList li').slice(0, x).slideDown();
    });
});

CSS

#myList li{display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
于 2019-03-28T19:47:30.063 回答