javascript - 如何使用 onclick() 延迟加载列表项？

Question

我正在尝试模仿使用 jquery 加载多个列表项的 ajax 感觉。

最终我想显示 10 个元素，然后在单击“加载更多”按钮后显示另外 10 个。

我的代码:

<ul id="listings-container">
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
</ul>

<a class="button" href="#">Load More</a>

我试过了，simplest way to lazy load long <ul> with many <li>s

我试图通过点击而不是滚动来完成类似的事情。

有什么想法吗？

Answer 1

DEMO

jQuery

$(".button").on("click", function () {
    $("#listings-container").find("li:hidden:lt(10)").show();
});

CSS

#listings-container li {
    display:none;
}