JQ利用数组动态添加删除元素

最新推荐文章于 2022-09-01 17:26:53 发布

RyzenVega

最新推荐文章于 2022-09-01 17:26:53 发布

阅读量1.2k

点赞数

分类专栏： Vue、JQ 文章标签： js jquery 前端

本文链接：https://blog.csdn.net/weixin_46607967/article/details/124326432

版权

Vue、JQ 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

点击数字往数组里新增参数并生成div 在此之前判断如果div存在则不添加参数并根据下标删除该div

<!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>
    <style>
        .choice,
        .isNum {
            display: flex;
        }

        .choice div,
        .isNum div {
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div class="choice">
        <div class="num" onclick="num(1)">1</div>
        <div class="num" onclick="num(2)">2</div>
        <div class="num" onclick="num(3)">3</div>
        <div class="num" onclick="num(4)">4</div>
        <div class="num" onclick="num(5)">5</div>
        <div class="num" onclick="num(6)">6</div>
        <div class="num" onclick="num(7)">7</div>
    </div>
    <div class="isNum">

    </div>
</body>
<script src="./js/jQuery.js"></script>
<script>
    var numList = []

    function num(num) {
        let index = numList.indexOf(num)
        if (index == '-1') {
            $("<div class='numItem'>样式" + num + "</div>").appendTo(".isNum");
            numList.push(num)
            console.log(numList);
        }else{
            numList.splice(index,1)
            $('.isNum>.numItem:eq('+index+')').remove()
            console.log(numList);
        }
    }
    
    
</script>

</html>

RyzenVega

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ利用数组动态添加删除元素

点击数字往数组里新增参数并生成div 在此之前判断如果div存在则不添加参数并根据下标删除该div<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width..
复制链接

扫一扫