在ul中加載更多li-JQuery

Question

我正在做一個有評論的項目，並且想顯示前3條評論，當您按load加載更多時，它應該會加載3條評論。 我不太擅長JQuery，並發現此代碼似乎首先起作用，但它卻立即顯示了我的所有結果，而更多的負載並不能真正解決問題。 （除非有人可以幫助我解決，否則我已跳過了展示的較少部分）

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