jquery - 鼠标点击添加div

Question

当用户单击添加另一个成员按钮时，我需要显示 div。用户只能添加 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);
     });
    }
});