加鼠標點擊div

Question

當用戶點擊添加另一個成員按鈕時，我需要顯示div。用戶只能添加5個成員，所以如何讓這個動作只產生5次特定的div？

這是需要在點擊上顯示的div。但不克隆，因爲我需要爲驗證的所有文本框添加不同的名稱屬性。

<div class="loop"> 
    <input type="text" value="first name" /> 
    <input type="text" value="lastname" /> 
    <input type="text" value="mail" /> 
    <input type="text" value="company" /> 
</div> 

<button>Add person</button> 

我需要在點擊按鈕時生成相同的div。但他們最多隻能創造5次。

Answer 1

該解決方案將克隆div的，並增加了name屬性所有的這個div內輸入，以name=value+id：DEMO：http://jsfiddle.net/R5urc/

<div class='parentDiv'> 
    <div class="loop"> 
     <input type="text" value="first name" /> 
     <input type="text" value="lastname" /> 
     <input type="text" value="mail" /> 
     <input type="text" value="company" /> 
    </div> 

您的按鈕：

<button id='add' onclick='addPerson()'>Add person</button> 

JS代碼：

<script type='text/javascript' 

    function addPerson(){ 

     if ($('div.loop').length<5) { 

      var clonedDiv=$($('div.loop')[0]).clone().appendTo('.parentDiv'); 

      clonedDiv.find('input').each(function() { 
      $(this).attr('name',$(this).val()+$('div.loop').length); 
      }); 

     } 

    } 

</script> 

Answer 2

由於@techfoobar說jQuery的克隆功能將是您的解決方案。

下面是有助於這個HTML：

<div class='container'> 
    <div class="loop"> 
     <input type="text" value="first name" /> 
     <input type="text" value="lastname" /> 
     <input type="text" value="mail" /> 
     <input type="text" value="company" /> 
    </div> 
</div> 
<button>Add person</button> 

所需的JavaScript：

clicks = 0; 
$('button').on('click', function() { 
    if ($('div.loop').length < 5) { 
     clicks++; 
     newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container"); 
     $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('value', $(element).attr('value') + clicks); 
     }); 
    } 
}); 

工作演示這裏http://jsfiddle.net/wRJAe/3/

Answer 3

在這裏你可以設置文本框的值動態

<div class="main_loop">  
     <div class="loop" style="display:none;"> 
      <input type="text" value="first name" /> 
      <input type="text" value="lastname" /> 
      <input type="text" value="mail" /> 
      <input type="text" value="company" /> 
     </div> 
    </div> 

     <div class="main"> 
     </div> 

     <button>Add person</button> 


$('button').on('click', function() { 
    if ($('.main .loop').length < 5) { 
    $('.main_loop .loop').clone().appendTo(".main").show(); 

    $(".main .loop:nth-child("+$('.main .loop').length+")").children().each(function(){ 

     $(this).val($(this).val()+$('.main .loop').length); 
    }); 
    } 
});