这就是我的分页脚本的工作方式
1:页面加载 - ajax 自动加载内容(完成)
2:onClick load_more btn(使用切换显示)-加载并显示更多内容(完成)
3:onClick load_more btn(使用工具隐藏) - 隐藏在第 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>
我不想隐藏在启动页面加载时显示的第一个内容。我怎样才能做到这一点,请提出一些建议。谢谢