Question

我已经创建了一个使用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>

第一个是工作，但它没有与第二个工作，任何人都可以帮助我解释为什么会发生这种情况？

Answer 1

您不能拥有多个具有一个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>

jquery加载更多功能

1 个答案: