Mutilple Javascript Variable Iterationen mit Jquery

Question

Ich habe ein Formular und möchte Benutzern die Möglichkeit geben, eine Gruppe von Feldern so oft wie nötig zu duplizieren. Bei einer Gruppe iteriert es korrekt, aber wenn ich eine zweite Gruppe hinzufüge, durchläuft die Variable "current" kollektiv, anstatt für jede Gruppe eindeutig zu sein ... Ich habe versucht, alle "current" auf "newFieldset.current" zu ändern, aber NAN zurückgibt. .. irgendwelche Ideen?

<script type="text/javascript"> 
$(document).ready(function() { 
var current = 0; 
    //Add New Fieldset with Button 
    var newFieldset = { 
     init: function(groupIndex) { 
      current++; 
      $newPerson= $("#Template"+groupIndex).clone(true); 
      $newPerson.children("p").children("label").each(function(i) { 
       var $currentElem= $(this); 
       $currentElem.attr("for",$currentElem.attr("for")+current); 
      }); 
      $newPerson.children("p").children("input").each(function(i) { 
       var $currentElem= $(this); 
       $currentElem.attr("name",$currentElem.attr("name")+current); 
       $currentElem.attr("value",$currentElem.attr("value")+groupIndex+current); 
       $currentElem.attr("id",$currentElem.attr("id")+current); 
      }); 

      $newPerson.appendTo("#mainField"+groupIndex); 
      $newPerson.removeClass("hideElement"); 
     }, 
     currentID: null, 
     obj: null 
    }; 
    $(".addButton").each(function() { 
     $(this).click(function() { 
      var groupIndex = $(this).attr("title"); 
      //newFieldset.obj = this; 
      //var fieldIndex = $(this).attr("class"); 
      newFieldset.init(groupIndex); 
     }); 
    }); 

    console.log('r'); 
}); 
</script> 
<style> 
.hideElement {display:none;} 
</style> 

<form name="demoForm" id="demoForm" method="post" action="#"> 
<div id="groupCtr1"> 
    <fieldset id="mainField1"> 
    <div id="Template1" class="hideElement"> 
    <p> 
     <label for="firstname">Name</label> <em>*</em> 
     <input id="firstname" name="firstname" size="25" /> <input id="lastname" name="lastname" size="25" /> 
    </p> 
    <p> 
     <label for="email">Email</label> <em>*</em><input id="email" name="email" size="25" /> 
    </p> 
    </div> 
    <div> 
    <p> 
     <label for="firstname1">Name</label> 
     <em>*</em> <input id="firstname1" name="firstname1" size="25" /> <input id="lastname1" name="lastname1" size="25" /> 
    </p> 
    <p> 
     <label for="email1">Email</label> 
     <em>*</em><input id="email1" name="email1" size="25" /> 
    </p> 
    </div> 
    </fieldset> 
    <p> 
    <input type="button" class="addButton" title="1" value="Add Another Person"> 
    </p> 
</div> 
<div id="groupCtr2"> 
    <fieldset id="mainField2"> 
    <div id="Template2" class="hideElement"> 
     <p> 
      <label for="coname">Company Name</label> <em>*</em> 
      <input id="coname" name="coname" size="25" /> 
     </p> 
     <p> 
      <label for="codesc">Description</label> <em>*</em><input id="codesc" name="codesc" size="25" /> 
     </p> 
    </div> 
    <div> 
     <p> 
      <label for="coname1">Company Name</label> 
      <em>*</em> <input id="coname1" name="coname1" size="25" /> 
     </p> 
     <p> 
      <label for="codesc1">Description</label> 
      <em>*</em><input id="codesc1" name="codesc1" size="25" /> 
     </p> 
    </div> 
    </fieldset> 
    <p> 
    <input type="button" class="addButton" title="2" value="Add Another Company"> 
    </p> 
</div> 
<input type="submit" value="Save"> 
</form> 

Answer 1

Bringen Sie den Wert auf das Element mit der Methode jQuery Daten. Inkrementieren Sie es bei Klick und geben Sie es als zweiten Parameter an die Methode newFieldset.init weiter. Voila!

$(document).ready(function() { 
    //Add New Fieldset with Button 
    var newFieldset = { 
     init: function(groupIndex,current) { 
       $newPerson= $("#Template"+groupIndex).clone(true); 
       $newPerson.children("p").children("label").each(function(i) { 
         var $currentElem= $(this); 
         $currentElem.attr("for",$currentElem.attr("for")+current); 
       }); 
       $newPerson.children("p").children("input").each(function(i) { 
         var $currentElem= $(this); 
         $currentElem.attr("name",$currentElem.attr("name")+current); 
         $currentElem.attr("value",$currentElem.attr("value")+groupIndex+current); 
         $currentElem.attr("id",$currentElem.attr("id")+current); 
       }); 

       $newPerson.appendTo("#mainField"+groupIndex); 
       $newPerson.removeClass("hideElement"); 
     }, 
     currentID: null, 
     obj: null 
    }; 
    $(".addButton").click(function() { 
     var groupIndex = $(this).attr("title"); 
     var current = $(this).data('current'); 
     $(this).data('current',++current); 
     //newFieldset.obj = this; 
     //var fieldIndex = $(this).attr("class"); 
     newFieldset.init(groupIndex,current); 
    }).data('current',0); 

    console.log('r'); 
}); 

Glücklich jquery-ing an Sie Herr.

Answer 2

wenn Sie machen nicht die aktuelle Variable global es wird funktionieren sollte. versuchen Sie dies:

var newFieldset = { 
        current: 0, 
        init: function() { 
         this.current++; 
         //rest of init code 
        }, 
        //all your other fieldset code here 
}; 
/* all other code */ 

EDIT: Nach der Frage erneut zu lesen, möchte ich einen völlig anderen Ansatz nehmen, was Sie erreichen wollen. Der obige Code zeigt immer noch das gleiche Verhalten für Sie. Wenn die Frage nicht erfolgreich beantwortet wurde, schreibe ich eine größere, wenn ich nach Hause komme.

Answer 3

würde ich so etwas tun:

... 
var currents = {}; 
var newFieldset = { 
    init: function(groupIndex) { 
     var current = 0; 
     if (currents[groupIndex]) { 
      current = currents[groupIndex]; 
     } 
     ++current; 
     currents[groupIndex] = current; 
...