编程 Javascript

基于jQuery实现点击列表加载更多效果

Posted in Javascript onMay 31, 2016

本文实例为大家分享了jQuery点击加载更多效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jquery showMore 显示更多</title>
  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="js/jquery.showMore.js"></script>
</head>
<body>
  <ul class="showMoreNChildren" pagesize="5">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li>m</li>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li>m</li>
  </ul>
 
  <ul class="mynews" pagesize="4">
    <li>news 11</li>
    <li>news 12</li>
    <li>news 13</li>
    <li>news 14</li>
    <li>news 21</li>
    <li>news 22</li>
    <li>news 23</li>
    <li>news 24</li>
    <li>news 31</li>
    <li>news 32</li>
    <li>news 33</li>
    <li>news 34</li>
  </ul>
 
  <script type="text/javascript">
    //调用显示更多插件。参数是标准的 jquery 选择符 
    $.showMore(".showMoreNChildren,.mynews");
  </script>
</body>
</html>
JavaScript code
 
(function () {
  var showMoreNChildren = function ($children, n) {
    //显示某jquery元素下的前n个隐藏的子元素
    var $hiddenChildren = $children.filter(":hidden");
    var cnt = $hiddenChildren.length;
    for (var i = 0; i < n && i < cnt ; i++) {
      $hiddenChildren.eq(i).show();
    }
    return cnt - n;//返回还剩余的隐藏子元素的数量
  }
 
  jQuery.showMore = function (selector) {
    if (selector == undefined) { selector = ".showMoreNChildren" }
    //对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
    $(selector).each(function () {
      var pagesize = $(this).attr("pagesize") || 10;
      var $children = $(this).children();
      if ($children.length > pagesize) {
        for (var i = pagesize; i < $children.length; i++) {
          $children.eq(i).hide();
        }
 
        $("<div class='showMorehandle' >显示更多</div>").insertAfter($(this)).click(function () {
          if (showMoreNChildren($children, pagesize) <= 0) {
            //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
            $(this).hide();
          };
        });
      }
    });
  }
})();

以上就是本文的全部内容，希望对大家的学习有所帮助。

- Author -

告别只是另一种体验

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全

May 27 Javascript

jquery ajax jsonp跨域调用实例代码

Dec 11 Javascript

对于Form表单reset方法的新认识

Mar 05 Javascript

JavaScript字符串对象fromCharCode方法入门实例（用于把Unicode值转换为字符串）

Oct 17 Javascript

初步认识JavaScript函数库jQuery

Jun 18 Javascript

jQuery事件绑定用法详解

Sep 08 Javascript

利用Angular.js限制textarea输入的字数

Oct 20 Javascript

js实现带进度条提示的多视频上传功能

Dec 13 Javascript

Cpage.js给组件绑定事件的实现代码

Aug 31 Javascript

详解在vue-test-utils中mock全局对象

Nov 07 Javascript

关于vue-cli 3配置打包优化要点（推荐）

Apr 22 Javascript

WebWorker 封装 JavaScript 沙箱详情

Nov 02 Javascript

浅谈JavaScript 执行环境、作用域及垃圾回收

May 31 #Javascript

页面get请求中文参数方法乱码问题的快速解决方法

May 31 #Javascript

Bootstrap表单布局样式代码

May 31 #Javascript

jQuery使用经验小技巧(推荐)

May 31 #Javascript

JavaScript知识点总结(十)之this关键字

May 31 #Javascript

JavaScript知识点总结(六)之JavaScript判断变量数据类型

May 31 #Javascript

JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别

May 31 #Javascript