2013-02-04 7 views
5

Şu anda üzerinde çalıştığım 2 zor UX JQuery problemi yaşıyorum. JQuery kullanarak 2 form değişkenini klonliyorum. Bunları nasıl indeksleyeceğimi, kimliklerini nasıl tanımlayabileceğimi ve bu kimliği kullanarak etiketleyebileceğim. Örneğin, seçim kutusundan 3 seçtiğimde 3 satırlık form almalı ve her satırın sol tarafındaki 1. form, 2. form, 3 formla başlayan bir sayı ile başlamalıdır. İkinci problem Ben doğrulayıcı [] onaylayan karşı [] doğrulamak istiyorum ikinci sorun var. Bunu klonlanmış bir HTML kodunda nasıl yaparım.Neden JQUERY klonu işlev görüyor ve ona bir kimlik ekliyor ve e-posta değerini onaylıyor?

İşte benim JSFiddle http://jsfiddle.net/tGprH/5/

İşte benim HTML kodu şudur: Burada

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

benim 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(); 

cevap

0

Eğer döngü gibi gerekli yazdırabilirsiniz olduğunu ..

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

ilk sorun Hakkında bu

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

0

deneyin: 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() + ']') 
    } 
}); 
: 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(); 

Ve karşılaştırma hakkında