9周的div阿賈克斯jQuery的負載在時間

Question

我有一個div，看起來像這樣：

<div class="all_articles third_article_module"> 
    <!--load in content from loadmore.html via ajax --> 
</div> 

我也有一個節目我更多的文字，看起來像這樣：

<div class="showmemore"> 
    <h2>Load more articles</h2> 
</div> 

我的loadmore.html頁面循環顯示所有文章。我想要做的事情是每次只顯示一些文章（例如9），然後將h2標籤附加到div的末尾。當沒有更多的文章離開時，我希望隱藏h2標籤。我的JS是這樣的：

$('.showmemore_inner h2').on("click", function(e){ 
    e.preventDefault(); 
    $('.third_article_module').load('loadmore.html'); 
}); 

$(document).ajaxStart(function(){ 
    $(show_header).text('Loading more articles').css('color', '#4c4c4e'); 
    $('.showmemore .showmemore_inner h2 span').css('display', 'block'); 
}); 

$(document).ajaxComplete(function(){ 
    $('.showmemore').appendTo('.all_articles.third_article_module'); 
    $('.ajax_article').addClass('active'); 
    $(show_header).text('Load more articles'); 
}); 

在我loadmore.html我有一個div容器和內容的每個包裹在這就是所謂的.ajax_article格。

Answer 1

您應該爲loadmore.html添加一個參數，以告知您需要多少文章以及從哪裏開始。像這樣：

var start = 0; 
$('.showmemore_inner h2').on("click", function(e){ 
    e.preventDefault(); 
    $('.third_article_module').load('loadmore.html?articles=9&start=' + start,'',function(data) {if(!data) {$('.showmemore_inner h2').remove();}}); 
    start = start + 9; 
}); 

這將確保每次演出更被點擊，接下來的9篇將是牽強，並且如果沒有接收到的數據顯示更多的將被刪除。當然，在loadmore.html中，你只應該循環參數所要求的那些文章。