怎么复制内容！！！

outluo 2015-09-07 10:05:14





<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{margin: 0; padding: 0;}

        li{list-style: none;}

        .div{width: 280px; margin: 50px auto;}

        .box_head li{width: 50px; height: 30px; background: #00BCF3; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; text-align: center; display: inline-block; cursor: pointer;}

        .box_head li.on{background: #e74303;}

        .box,.menu,.box1{margin-top: 10px; float: left; width: 260px;}

        .box li,.menu span,.box span{width: 50px; height: 30px; background: #00BCF3; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; text-align: center; display: inline-block; cursor: pointer;}

        

        .box li.on{background: #5BCEA1;}

        .btn,.btn1{width: 100px; height: 35px; background: #DA251C; color: #FFFFFF; text-align: center; line-height: 35px; margin-top: 20px; cursor: pointer; float: left;}

        .js_box_2{border: 1px solid #333333;}

        .fuzhi{width: 50px; height: 30px; border: 1px solid #00BCF3; text-align: center; line-height: 32px; color: #333333; cursor: pointer;float: right;}

    </style>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

</head>

<body>

    <div class="div">

        <div class="box_head js_box_head">

            <ul>

                <li>内容1</li>

            </ul>

        </div>

        <div class="box"><input type="text" class="js_input"><div class="fuzhi js_fuzhi">复制</div></div>

        <div class="box js_box">

           

        </div>

    </div>

    

</body>

<script>

    $(function(){

        $('.js_fuzhi').on('click',function(){

            var t = $('.js_input').val();

            $('.js_box').html($('.js_box_head li').clone());

        });

    });

</script>

</html>

请问下应该怎么根据输入框里面的数字复制相对应的个数的内容比如输入框里面输入3 复制3个 js_box_head li 到 js_box里面

...全文

123 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

扶我起来~我还能敲 2015-09-07

打赏
举报

change事件拿到值然后赋值

豪情 2015-09-07

打赏
举报

核心方法：


function copyHtml(str, num){
    var arr = [];
    for(var i = 0; i < num; i++){
        arr.push(str);
    }
    return arr.join('');
}


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
        li{list-style: none;}
        .div{width: 280px; margin: 50px auto;}
        .box_head li{width: 50px; height: 30px; background: #00BCF3; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; text-align: center; display: inline-block; cursor: pointer;}
        .box_head li.on{background: #e74303;}
        .box,.menu,.box1{margin-top: 10px; float: left; width: 260px;}
        .box li,.menu span,.box span{width: 50px; height: 30px; background: #00BCF3; color: #FFFFFF; margin: 0 10px 10px 0; line-height: 30px; text-align: center; display: inline-block; cursor: pointer;}

        .box li.on{background: #5BCEA1;}
        .btn,.btn1{width: 100px; height: 35px; background: #DA251C; color: #FFFFFF; text-align: center; line-height: 35px; margin-top: 20px; cursor: pointer; float: left;}
        .js_box_2{border: 1px solid #333333;}
        .fuzhi{width: 50px; height: 30px; border: 1px solid #00BCF3; text-align: center; line-height: 32px; color: #333333; cursor: pointer;float: right;}
    </style>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="div">
    <div class="box_head js_box_head">
        <ul>
            <li>内容1</li>
        </ul>
    </div>
    <div class="box"><input type="text" class="js_input"><div class="fuzhi js_fuzhi">复制</div></div>
    <div class="box js_box">

    </div>
</div>

</body>
<script>
    $(function(){
        $('.js_fuzhi').on('click',function(){
            var t = $('.js_input').val();
            $('.js_box').html(copyHtml($('.js_box_head ul').html(), t));
        });
    });
function copyHtml(str, num){
    var arr = [];
    for(var i = 0; i < num; i++){
        arr.push(str);
    }
    return arr.join('');
}
</script>
</html>