jquery控制加载更多效果

最新推荐文章于 2022-06-11 17:08:06 发布

坚持到底就能逆袭

最新推荐文章于 2022-06-11 17:08:06 发布

阅读量836

点赞数

分类专栏： js 前端htmlcss 文章标签：加载加载更多 js jquery

前端htmlcss 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

转自论坛的一位大手，wzhiyuan
详情出自这里：http://bbs.csdn.net/topics/390767447


<!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>


(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(); }; });
            }
        });
    }
})();

其中加载更多的类showMorehandle可以自定义。

坚持到底就能逆袭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery控制加载更多效果

转自论坛的一位大手，wzhiyuan 详情出自这里：http://bbs.csdn.net/topics/390767447<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
复制链接

扫一扫