2

我正在创建一个带有一些输入字段的表单，类似于：

<label>First Name<input type="text" id="firstname1" name="firstname1"></label>
<label>Last Name<input type="text" id="lastname1" name="lastname1"></label>

还有更多，但你明白了要点。我已经将所有输入包装到一个容器 div 中，并使用 jQuery 将其克隆到一个空 div 中。（所以有一个名为“复制”的按钮供用户单击以创建一个包含所有相同输入字段的新框。）

$('#replicate').click(function(){
$('.container').clone().appendTo($('.emptyContainer'));

然后我需要每个新容器在每次创建新容器时将其类增加 1：

var container = $(".emptyContainer div").length;
var containerNumber = container + 1;
var containerClass = 'container' + containerNumber;
$(".emptyContainer .container").attr("class", containerClass);

这一切似乎都按我的意愿工作 - 我现在面临的问题是，如果第一个输入字段中有任何值，复制按钮将创建一个新容器，其中包含原始字段中的信息。我该如何克服这一点？

4

1 回答 1

1

After you have cloned the container, you need to empty the input fields and then append to the target container.

$('#replicate').click(function(){
    var clonedElm = $('.container').clone();
    clonedElm.find('input').val('');
    cloneElm.appendTo($('.emptyContainer'));
});

Edit:

You said, you need every new container to increment it's class by 1 every time a new container is created. So in this case you need to remove the older class and assign a new class to the cloned container.

So this will be the solution:

$('#replicate').click(function(){
    var clonedElm = $('.container').clone();
    clonedElm.find('input').val('');
    var container = $(".emptyContainer div").length;
    var containerNumber = container + 1;
    var containerClass = 'container' + containerNumber;
    clonedElm.removeClass('container').addClass(containerClass);
    clonedElm.appendTo($('.emptyContainer'));
});

Check the demo fiddle.

于 2013-06-09T04:55:19.693 回答