jquery点击增加div

最新推荐文章于 2023-08-25 15:04:25 发布

糟糕的沙漠

最新推荐文章于 2023-08-25 15:04:25 发布

阅读量903

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/weixin_42412237/article/details/114533669

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

点击添加模块

使用字符串拼接，将代码拼接好使用append()函数
使用clone()函数
$(selector).clone(true|false)
|参数| 描述|
|–|--|
|true| 规定需复制事件处理程序。|
|false| 默认。规定不复制事件处理程序。|

例子在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../layui/css/layui.css" rel="stylesheet" type="text/css" />
    <link href="../css/xadmin.css" rel="stylesheet" type="text/css" />
    <link href="../layui/css/modules/layui-extend-icon/iconfont.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
        <legend>步骤编辑
            <i class="layui-icon layui-icon-add-circle" style="font-size: 1.2em;cursor: pointer;" id="Addbtn"></i>
            <i class="layui-icon layui-icon-close" style="font-size: 1.2em;cursor: pointer;" id="Reducebtn"></i>
            <i id="clone" style="font-size: 1.2em;cursor: pointer;" >克隆</i>
        </legend>
    </fieldset>
    <div id="descArea">
        <div class="layui-form-item" >
            <label class="layui-form-label" >
                <span class="x-red">*</span>1</label>
            <div class="layui-inline ">
                <div class="layui-input-inline">
                    <input type="text" id="desc" lay-verify="required" name="desc[]" required="" autocomplete="off" class="layui-input" placeholder="description">
                </div>
                <input class="layui-btn" type="button" value="Picture" onclick="upload('desc',1)">
            </div>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
        <legend>步骤描述
            <i class="layui-icon layui-icon-add-circle" style="font-size: 1.2em;cursor: pointer;" id="stepAddbtn"></i>
            <i class="layui-icon layui-icon-close" style="font-size: 1.2em;cursor: pointer;" id="stepReducebtn"></i>
            <i style="font-size: 1.2em;cursor: pointer;" id="stepClone">克隆</i>
        </legend>
    </fieldset>
    <div id="stepArea"></div>

</body>
<script>
    // desc 点击添加
    $("#Addbtn").on('click',function(){
        let desc_count = $("#descArea>.layui-form-item").length+1;
        let html = getActionStr(desc_count, '')
        $("#descArea").append(html);
    })
    // desc 点击删除
    $("#Reducebtn").on('click',function(){
        if($("#descArea>.layui-form-item").length>1){
            $("#descArea").children("div:last-child").remove()
        }
    })
    $('#clone').on('click',function(){
        $("#descArea").children("div:last-child").clone(true).appendTo('#descArea');
    })
    // 字符串拼接
    function getActionStr(number, value){
        let actionStr = '<div class="layui-form-item" ><label class="layui-form-label"><span class="x-red">*</span>'+number+'</label><div class="layui-inline"><div class="layui-input-inline"><input type="text" id="desc" lay-verify="required" name="desc[]" required="" autocomplete="off" class="layui-input" placeholder="description" value="'+value+'"></div><input class="layui-btn" type="button" value="Picture" οnclick="upload(\'desc\','+number+')"></div></div></div>';
        return actionStr;
    }
    function upload(step, number){
        console.log('图片上传'+number)
    }
</script>
<script>
    $("#stepAddbtn").click(function(){
        let step_count = $("#stepArea>.layui-form-item").length+1;
        let html = getSimStr(step_count);
        $("#stepArea").append(html);
    })
    $("#stepReducebtn").click(function(){
        if($("#stepArea>.layui-form-item").length>0){
            $("#stepArea").children("div:last-child").remove()
        }
    })
    $("#stepClone").click(function(){
        $("#stepArea").children("div:last-child").clone(true).appendTo('#stepArea');
    })
    
    function getSimStr(number){
        let simStr = '<div class="layui-form-item"><div class="layui-inline layui-input-block"><label class="layui-form-label"><span class="x-red">*</span>title'+number+'</label><div class="layui-input-inline"><input type="text" id="title" name="title[]" required="" autocomplete="off" class="layui-input" lay-verify="required"></div></div><div class="layui-inline layui-input-block"><div class="layui-input-inline"><i class="layui-icon layui-icon-add-circle"style="font-size:1.3em;cursor: pointer;" οnclick="a($(this),'+number+')"></i><i class="layui-icon layui-icon-close" style="font-size:1.3em;cursor: pointer;" οnclick="d($(this),'+number+')"></i></div></div></div>';
        return simStr;
    }
    function getsimDescStr(pcount, mcount, desc){
        let simdescstr = '<div class="layui-form-item"><div class="layui-inline layui-input-block"><label class="layui-form-label" style="width: 150px;"><span class="x-red">*</span>Descript'+pcount+'_'+mcount+'</label><div class="layui-input-inline"><input type="text" id="desc" name="desc['+pcount+'][]" required="" autocomplete="off" class="layui-input" lay-verify="required" value="'+ desc +'"></div><div class="layui-inline layui-input-block"><label class="layui-form-label"><span class="x-red">*</span>Picture</label><input class="layui-btn" type="button" οnclick="u(\'descript\','+pcount+','+mcount+')" value="Picture"></div></div></div>';

        return simdescstr;
    }
    function a(p,pcount){
        let mcount = p.parent().parent().parent().find(".layui-form-item").length + 1
        let tempstr = getsimDescStr(pcount, mcount, '');
        p.parent().parent().parent().append(tempstr);
    }
    function d(p,pcount){
        if(p.parent().parent().parent().find(".layui-form-item").length>1){
            p.parent().parent().parent().children("div:last-child").remove()
        }
    }
    function u(step, pcount, mcount){
        console.log(step, pcount, mcount)
    }
</script>
</html>

糟糕的沙漠

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery点击增加div

点击添加模块使用字符串拼接，将代码拼接好使用append()函数使用clone()函数$(selector).clone(true|false)|参数| 描述||–|--||true| 规定需复制事件处理程序。||false| 默认。规定不复制事件处理程序。|例子<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title>
复制链接

扫一扫