jquery加载了更多的功能

jquery load more function

本文关键字：功能 加载 jquery      更新时间：2023-09-26

我使用jquery创建了一个加载更多的函数，并将其放置在一个名为main.js的外部文件中

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

虽然它工作得很好，但只有1，因为评论的数据比的1多

<ul class="comment_response" id="comment_list">
   <li></li>
</ul>
<div id="loadMore">Load more</div>
<ul class="comment_response" id="comment_list">
   <li></li>
</ul>
<div id="loadMore">Load more</div>

第一个有效，但第二个无效。有人能帮我解释为什么会发生这种情况吗？

一个id不能有多个元素。将其更改为：

$(document).ready(function () {
    size_li = $(".comment_list li").length;
    x=2;
    $(this).previous().find('li:lt('+x+')').show();
    $('.loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $(this).previous().find('li:lt('+x+')').show();
    });
    $('.showLess').click(function () {
        x=(x-5<0) ? 2 : x-5;
        $(this).previous().find('li').not(':lt('+x+')').hide();
    });
});

HTML:

<ul class="comment_response comment_list>
   <li></li>
</ul>
<div class="loadMore">Load more</div>
<ul class="comment_response comment_list>
   <li></li>
</ul>
<div class="loadMore">Load more</div>
相关文章：