Question

当用户点击添加其他成员按钮时，我需要显示div。用户只能添加5个成员，那么如何才能使动作生成特定的div只有五次？

这是需要在点击时显示的div。但不是克隆，因为我需要为验证的所有文本框添加不同的name属性。

<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);
     });
    }
});

单击鼠标添加div

3 个答案: