2

div のクローンを作成して ID をインクリメントする必要がありますが、クローンの回数を 3 に制限する必要があります。これが私のコードです。

div のフィールドを複製し、ID をインクリメントするボタンがあります。これはうまくいっています。ユーザーが 3 回しか複製できない機能を追加したい。したがって、出力は になり<div id="Outer_00">、 4番目のボタン<div id="Outer_01">を<div id="Outer_02">;クリックしても複製されません。ここに 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 の 3 番目の要素に到達したかどうかを確認します。

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

デモフィドル

于 2013-08-04T20:52:14.113 に答える
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

私はただやります：

$(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

次のような再利用可能なものはどうでしょうか。

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 に答える