jQuery的負載更多的功能

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").size(); 
    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>