Question

您好我有一个需要克隆最多六次的输入框，根据.clone（）函数，我可以这样做，但是如果必须更改输入名称，该怎么做。

http://api.jquery.com/clone/

<label for="input">
 <input name="input" id="input" type="text">
</label>

<a href="#" onClick="cloneInput()">Add Another Input</a>

因此，假设在创建新输入时，它应该在名称和id上添加一个增量，即：name="input2" id="input2"等等，每次克隆对象时。

对于使用jQuery执行此操作的最佳/最简单方法，任何人都有任何建议吗？

Answer 1

首先删除内联事件处理使用jQuery，而不是使用clone，你可以试试这个。

标记

<div id="inputContianer">
   <label for="input">
     <input name="input" id="input" type="text">
   </label>
</div>

<a class="cloneInput" href="#">Add Another Input</a>

JS

$(function(){
   var count = 1;
   $('a.cloneInput').click(function(){
       var id = 'input' + (count++);
       $('<label />', { for: id })
       .append($('<input />', { id: id, name: id, type: "text" }))
       .appendTo('#inputContianer');

       return false;
   });
});

Answer 2

在cloneInput函数中，您可以为元素赋值属性，如下所示：

$('input').last().attr('name', 'a_new_name');

此示例将找到您的上一个输入字段，并为其指定一个新名称。同样适用于ID，值等。查找：http://api.jquery.com/attr/

或者詹姆斯指出，它也可以在clone（）之后直接使用：

$('#clone_me').clone().attr('id', 'im_the_clone');

Answer 3

似乎这样工作：

<script>
    var c = 1;
    function cloneInput() {
        $('#input')
              .clone()
              .attr('id', 'input'+c)
              .attr('name', 'input'+c)
              .appendTo('#clones')
              .wrap('<label for="input'+c+'"/>');
        c++;
    }
</script>

<label for="input">
 <input name="input" id="input" type="text">
</label>

<a href="#" onClick="cloneInput()">Add Another Input</a>

<div id="clones"></div>

克隆输入框

3 个答案: