2

我需要克隆 div 并增加 ID，但还将克隆的次数限制为 3。这是我的代码：

我有一个按钮，它将克隆 div 中的字段并增加 ID。这工作正常。我想添加只允许用户克隆 3 次的功能；所以输出将是<div id="Outer_00">，<div id="Outer_01">然后<div id="Outer_02">;在第 4 个按钮上单击它不会克隆。这是一个 jsFiddle： http: //jsfiddle.net/Ea5JE/ 如果 jsFiddle 不工作，这里是代码：

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {

        var current_id = 0;
     $('#btn').click(function(){
         nextElement($('#Outer_00'));
     })

     function nextElement(element){
         var newElement = element.clone();
         var id = current_id+1;
         current_id = id;
         if(id <10)id = "0"+id;
         newElement.attr("id",element.attr("id").split("_")[0]+"_"+id);
         var field = $('input', newElement).attr("id");
         $('input', newElement).attr("id", field.split("_")[0]+"_"+id );
         newElement.appendTo($("#elements"));
     }

    });

    </script>
</head>
<body>
    <div id="elements">
 <div id="Outer_00">
 <input type="text" id="Field1_00" value="">
 &nbsp;
 <input type="text" id="Field2_00" value="">
 </div>
 </div>

 <button id="btn">button</button>
</body>
</html>

任何帮助表示赞赏，谢谢。

4

4 回答 4

3

只需添加一个检查，看看您是否已经到达 id=2 的第三个元素

$('#btn').click(function(){
    if(current_id < 2)
        nextElement($('#Outer_00'));
});

演示小提琴

于 2013-08-04T20:52:14.113 回答
0

我会这样做：

$(document).ready(function() {
    $('#btn').click(function(){
        var el = $('[id^="Outer_"]');
        if ( el.length < 3 ) {
            var clone = el.last().clone(true);
            clone.children().addBack().prop('id', function(_,ID) {
                return ID.slice(0,-1) + (parseInt(ID.slice(-1),10)+1);
            }).end().end().appendTo("#elements");
        }
    });
});

小提琴

于 2013-08-04T21:06:26.557 回答
0

DEMO HERE 我会这样做...

   $( document ).ready(function() {

    var current_id = 0;
    $('#btn').click(function(){
        nextElement($('#Outer_00'));
    })

    function nextElement(element){

        if(current_id!=2){
        var newElement = element.clone();
        var id = current_id+1;
        current_id = id;

        if(id <3) id = "0"+id;
        newElement.attr("id",element.attr("id").split("_")[0]+"_"+id);
        newElement.data('id',id);
        var field = $('input', newElement).attr("id");
        $('input', newElement).attr("id", field.split("_")[0]+"_"+id );
            newElement.appendTo($("#elements"));}
    }

});
于 2013-08-04T20:58:12.867 回答
0

可重复使用的东西怎么样，例如：

function limit(func, max) {
    return function() {
        if (max > 0) {
            max = max - 1;
            return func.apply(this, arguments);
        }
    };      
};

接着：

var nextElement = limit(function(element) {
    //function body here
}, 3);

$('#btn').click(function(){
    nextElement($('#Outer_00'));
});

这是您的小提琴的分叉版本：http: //jsfiddle.net/2RHXx/14/

于 2013-08-05T00:22:53.370 回答