首页>>分页>>jQuery+php点击按钮加载更多 点击显示更多 点击更多翻页(2018-07-14)

jQuery+php点击按钮加载更多 点击显示更多 点击更多翻页

本例没有使用插件,输出的内容必须是套在<li></li>里面的。如果你想套在其他的标签里，在index.php里的js脚本里面自己改

jQuery+php点击按钮加载更多 点击显示更多 点击更多翻页
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="content">  
  2.         <div class="hidden">  
  3.             <?php  
  4.             //获取数据  
  5.             require_once("list.php");  
  6.               
  7.             ?>  
  8.         </div>  
  9.         <ul class="list">数据加载中，请稍后...</ul>  
  10.         <div class="more"><a href="javascript:;" onClick="loadding.loadMore();">点击加载更多</a></div><br/>  
  11.     </div>  

 

JavaScript Code
  1. <script>  
  2.         var _content = []; //临时存储li循环内容  
  3.         var loadding = {  
  4.             _default:4, //默认个数  
  5.             _loading:4, //每次点击按钮后加载的个数  
  6.             init:function(){  
  7.                 var lis = $(".content .hidden li");  
  8.                 $(".content ul.list").html("");  
  9.                 for(var n=0;n<loadding._default;n++){  
  10.                     lis.eq(n).appendTo(".content ul.list");  
  11.                 }  
  12.                 for(var i=loadding._default;i<lis.length;i++){  
  13.                     _content.push(lis.eq(i));  
  14.                 }  
  15.                 $(".content .hidden").html("");  
  16.             },  
  17.             loadMore:function(){  
  18.                 var mLis = $(".content ul.list li").length;  
  19.                 for(var i =0;i<loadding._loading;i++){  
  20.                     var target = _content.shift();  
  21.                     if(!target){  
  22.                         $('.content .more').html("<p style='color:#f00;'>已加载全部...</p>");  
  23.                         break;  
  24.                     }  
  25.                     $(".content ul.list").append(target);  
  26.                 }  
  27.             }  
  28.         }  
  29.         loadding.init();  
  30.     </script>  

 


原文地址:http://www.freejs.net/article_fenye_654.html