これが私のページネーションスクリプトの仕組みです
1: ページの読み込み時 - ajax はコンテンツを自動的に読み込みます (完了)
2: onClick load_more btn (トグル ショーを使用) - より多くのコンテンツを読み込んで表示する (完了)
3: onClick load_more btn (toogle hide を使用) - セット 2 でロードされたものを非表示にします (これを実装する方法)
<div class="resultsblock">
<div class="results"></div>
<div class="clear:left;"></div>
<button class="load_more" id="load_more_button"></button>
<div class="animation_image" style="display:block;">Loading...</div>
</div>
<script>
jQuery(document).ready(function() {
var url = "http://www.abc.com";
var track_click = 1; //track user click on "load more" button
var total_pages = <?php echo $this->totalPages(); ?>;
console.log(total_pages);
// default load
jQuery('.results').load(url, {'p':track_click}, function()
{
jQuery('.animation_image').hide();
if(total_pages==1) { jQuery(".load_more").hide(); } else { jQuery(".load_more").show(); }
}
);
jQuery(".load_more").toggle(function(){
jQuery(this).hide();
jQuery('.animation_image').show();
console.log(track_click);
// ajax load first load
jQuery.post(url,{'p': track_click}, function(data) {
jQuery(".load_more").show();
jQuery(".results").append(data);
jQuery('.animation_image').hide();
});
// Now how to hide the elements loaded by ajax
},function(){console.log('hide previous load')}); --- step 3
});
// this may not affect toggle. It just waiting for ajax to finish and perform more..
jQuery(document).ajaxComplete(function(){
if(jQuery('.prod').length != 0) {
jQuery(".prod").hover(function(){
jQuery(this).find(".prod_title").hide();
jQuery(this).find(".prod_desc").fadeIn();
},function(){
jQuery(this).find(".prod_desc").fadeOut();
jQuery(this).find(".prod_title_wrap").show();
jQuery(this).find(".prod_title").show();
});
}
});
</script>
開始時にページの読み込み時に表示される最初のコンテンツを非表示にしたくありません。どうすればこれを達成できますか?何か提案してください。ありがとうございました