javascript - 在 ul 中加载更多 li - JQuery

Question

我正在开发一个项目，我有评论并希望显示前 3 个评论，当您按“加载更多”时，它应该再加载三个评论。我不擅长 JQuery，发现这段代码，似乎首先工作，但它一次显示了我的所有结果，并且加载更多并没有真正起作用。 (我已经跳过了 show less 部分，除非有人能帮我修复它)

HTML:

    <ul id="results">
        <li>...CONTENT1...</li>
        <li>...CONTENT2...</li>
        <li>...CONTENT3...</li>
    </ul>
<div id="loadMore">Load more</div>

JQuery:

<script type='text/javascript'>
        $(window).load(function(){
        $(document).ready(function () {
            size_li = $("#results li").size();
            x=3;
            $('#results li:lt('+x+')').show();
            $('#loadMore').click(function () {
                x= (x+5 <= size_li) ? x+5 : size_li;
                $('#results li:lt('+x+')').show();
                 $('#showLess').show();
                if(x == size_li){
                    $('#loadMore').hide();
                }
            });
            $('#showLess').click(function () {
                x=(x-5<0) ? 3 : x-5;
                $('#results li').not(':lt('+x+')').hide();
                $('#loadMore').show();
                 $('#showLess').show();
                if(x == 3){
                    $('#showLess').hide();
                }
            });
        });
        });
    </script>

Answer 1

您最初需要隐藏它们，

#results li {display:none;}