美文网首页
jq默认显示5条数据,更多追加5条,以此类推到没有数据,收起,反

jq默认显示5条数据,更多追加5条,以此类推到没有数据,收起,反

作者: 每天进步一点点5454 | 来源:发表于2021-03-22 17:50 被阅读0次

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div class="zk2">
<ul>

    </ul>
    <div class="zk">展开</div>
</div>
<script type="text/javascript" src="http://60.205.143.183:8888/js/jquery-1.12.4.js"></script>
<script>
    var arr = ['陈立农1', '陈立农2', '陈立农3', '陈立农4', '陈立农5', '陈立农6', '陈立农7', '陈立农8', '陈立农9', '陈立农10', '陈立农11', '陈立农12', '陈立农13'];
    var defualtarr = arr
    var newarr = [];
    var de = arr.splice(0, 5)

    var str = ''
    for (var i = 0; i < de.length; i++) {
        str += ` <li>${de[i]}</li>`
    }
    $('.zk2 ul').html(str)

    $('.zk').on({
        click: function () {
            var aa = arr.splice(0, 5)
            newarr = aa
            var textt = '';
            var textt2 = ''
            for (var i = 0; i < newarr.length; i++) {
                textt += ` <li>${newarr[i]}</li>`
            }
            $('.zk2 ul').append(textt)
            if ($(this).html() == '收起') {
                $(this).html('展开')
                for (var i = 0; i < de.length; i++) {
                    textt2 += ` <li>${de[i]}</li>`
                }
                $('.zk2 ul').html(textt2)
                // 这个地方调用接口重新赋值就可
                arr = ['陈立农1', '陈立农2', '陈立农3', '陈立农4', '陈立农5', '陈立农6', '陈立农7', '陈立农8', '陈立农9', '陈立农10', '陈立农11', '陈立农12', '陈立农13'];
            }
            if (arr.length <= 5 && newarr <= 5) {
                $(this).html('收起');
            }





        }
    })


</script>

</body>

</html>

相关文章

网友评论

      本文标题:jq默认显示5条数据,更多追加5条,以此类推到没有数据,收起,反

      本文链接:https://www.haomeiwen.com/subject/zmqthltx.html