使用jQuery加载前3个元素，点击“加载更多”按钮显示下5个元素。

Question

使用jQuery加载前3个元素，点击“加载更多”按钮显示下5个元素。

22

Item 1
Item 2
Item 3

项目1
项目2
项目3

<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个列表项，当用户点击“加载更多”时，显示接下来的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/

- JV10

2

load()函数会使用$.get方法加载整个文件，然后在客户端执行筛选操作。因此，你应该自己加载整个文件并进行筛选，而不是一遍又一遍地重新加载相同的内容。 - adeneo

感谢@adeneo，我刚刚进行了编辑，现在显示下5个列表项而不是加载。 - JV10

3个回答

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();
    });
});

- Optimus Prime

1

我喜欢隐藏“显示更多”链接的功能，当没有更多内容需要显示时。它看起来更整洁。 - Mr. Lance E Sloan

7

您的fiddle存在问题，首先加载更多项目，然后显示较少的项目，而加载更多的功能未被显示。我已经fork了您的fiddle并提供了可工作的版本：http://jsfiddle.net/santosh_patnala/nFd7C/422/ - UiUx

嗨，我该如何使这个JS适用于3个不同的块？ :-/ 我尝试添加不同的ID但没有成功。有什么建议吗？ :) - user2513846

我们可以把这段代码用在一个id为#mylist的最外层div里面，作为一个带有特定class的子div吗？请帮忙。http://jsfiddle.net/nFd7C/1960/ - user9934260

@OptimusPrime 这是新的js fiddle http://jsfiddle.net/nFd7C/1965/ 我想展示前三张图片，然后在点击“加载更多”后添加两张。 - user9934260

@Optimus Prime @UiUx 根据最新的jquery规则，我不得不用length替换size()。但是如果你只想每次加载额外的2个而不是5个，代码的哪一部分需要更改？ - atsngr

10

在jQuery3中，表达式$(document).ready(function()已经被弃用。

请参见使用jQuery 3的工作演示这里

请注意，我没有包含showless按钮。

以下是代码：

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;
}

- Kaiser

1

嗨凯撒，当列表已满时，禁用按钮的管理也可能很有趣。 - Luca Detomi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tushar Gupta - curioustushar · Accepted Answer

警告：jQuery 1.8中已弃用size()，在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/