Warum funktioniert der JQUERY-Klon und hängt eine ID an und bestätigt den E-Mail-Wert?

Question

Ich habe 2 schwierige UX JQuery-Probleme, an denen ich gerade arbeite. Ich klonen eine 2-Form-Variablen mit JQuery. Wie indexiere ich, id, damit ich sie mit dieser ID beschriften kann. Zum Beispiel, wenn ich 3 aus dem Auswahlfeld wählen, sollte ich 3 Zeilen Formular erhalten und auf der linken Seite jeder Zeile beginnt mit einer Nummer beginnend mit 1. Formular, 2. Formular, 3 Formular.

Das zweite Problem, das ich habe Ich möchte Attendant [] gegen Confirmattendant [] validieren. Wie würde ich das in einem geklonten HTML-Code machen?

Hier ist meine JSFiddle http://jsfiddle.net/tGprH/5/

Hier ist mein HTML-Code ist:

<select name="select" id="select"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 
<br/> 
<p>Email address, Confirm Email Address</p> 
#1 <input type="text" name="attendant[]"/> 
<input type="text" name="confirmattendant[]"/> 
<br/> 

<div id="container"> 

</div> 

Hier ist mein JQuery

$("select").change(function() { 

    var select = parseInt($('#select').val() , 10); 
    var $clone = '<input type="text" name="attendant[]" /><input type="text" name="confirmattendant[]" /><br/>'; 
    console.log($clone); 
    var html = ''; 
    for(var i = 1;i< select ; i++){ 
     html += $clone; 
    } 
    $('#container').empty().html(html); 
}).change(); 

Answer 1

Sie die erforderlichen in Ihrer for-Schleife wie gedruckt werden können ..

html += '#'+(i + 1)+ ' '+$clone; 

versuchen, diese

$("select").change(function() { 

    var select = parseInt($('#select').val() , 10); 
    var $clone = '<input type="text" name="attendant[]" /><input type="text" name="confirmattendant[]" /><br/>'; 
    console.log($clone); 
    var html = ''; 
    for(var i = 1;i< select ; i++){ 
     html += '#'+(i + 1)+ ' '+$clone; 
    } 
    $('#container').empty().html(html); 
}) 

fiddle here

Answer 2

Über das erste Problem: http://jsfiddle.net/tGprH/7/

$("select").change(function() { 

    var select = parseInt($('#select').val() , 10); 
    var $clone = '<input type="text" name="attendant[]" /><input type="text" name="confirmattendant[]" /><br/>'; 
    console.log($clone); 
    var html = ''; 
    for(var i = 1;i< select ; i++){ 
     if(i >= 1) 
      html += '#' + (i+1) + ' ' + $clone; 
     else 
      html += $clone; 
    } 
    $('#container').empty().html(html); 
}).change(); 

Und über den Vergleich: http://jsfiddle.net/tGprH/8/

<button id="compare">compare</button> 

$('#compare').click(function(){ 
    var $attendantArray = $('input[name="attendant[]"]'); 
    var $confirmattendantArray = $('input[name="confirmattendant[]"]'); 
    for(var i = 0;i< $attendantArray.length ; i++) 
    { 
     alert((i+1) + ' attendant [' + $($attendantArray[i]).val() + '/' + $($confirmattendantArray[i]).val() + ']') 
    } 
});