jQuery点击按钮加载更多功能每次加载个数可以设置
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jQuery点击按钮加载更多功能

主要js代码与说明

<script type="text/javascript">
    //jQuery加载更多
    var num = 2;
    //取得li个数
    var len = $('.list li').length;
    if (len > 2) {
        $('.more a').show();
    } else {
        $('.more').html("加载完毕");
    }
    //默认隐藏所有li
    $('.list li').css('display', 'none');
    //显示所有小于num的元素li
    $('.list li:lt(' + num + ')').css('display', 'block');
    //加载更多点击事件
    $('.more a').on('click', function () {
        num += 2;
        //显示所有小于num的元素li
        $('.list li:lt(' + num + ')').fadeIn();
        //加载完毕后
        if (num >= len) {
            $('.more').html("加载完毕");
        }
    })
</script>