加鼠标点击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); 
    }); 
    } 
});