1

我正在开发一个注册网站，其中有一部分我需要添加人员。我所做的是，当他们单击该人的姓名和姓氏下方的文本时，会出现另外两个字段（再次询问姓名和该人，因此它是上述字段的副本）。这是我使用clone()方法来做的。因此，假设姓名和姓氏在一个 div 中，其中有一个名为“信息”的类。并且在<p>包含时添加额外 div 的 id 称为：“add”。像这样：

<div class="information">
<label for="name">Name</label>
<input type="text" name="name[]"> //it's an array because there's gonna be probably more than one (if they click the "add" text)
<label for="last_name">Last Name</label>
<input type="text" name="last_name[]">
</div>
<p id="add">Add another person</p>

我的 javascript (jquery) 如下：

$('#add').click(function(){
    $('.information').clone().insertAfter('.information');
});

这样做的问题是，当您单击添加文本时，它会复制第一个 div（如果您在上面写了一些东西，它也会复制它）。那我该如何解决。还有其他方法吗？另外，是否有任何简单的方法可以让按钮消失“信息”div（以防用户后悔他想添加多少人）。

任何建议都会受到好评。提前致谢。

编辑：对不起，伙计们。有件很重要的事我忘了说。仅当用户单击复选框时才会显示信息类（因为他们可能不希望添加任何其他人。因此，这里是复选框的代码：

HTML（在信息类之上）：

<input type="checkbox" id="companion" />Companion

查询：

$("#companion").click(function() {
     $(".information").toggle();
     if ($('#companion').is(":checked")) {
        $('#add').show();
     }
     else {
        $('.companion').hide();
        $('.companion').removeAttr('checked');
    }
});

我澄清这一点是因为我尝试了你们向我展示的示例，但是当我单击复选框时，信息 div 不显示。我应该在我的原始帖子中提到这一点。真的很抱歉。

4

3 回答 3

2

您可以使用:lastand:first选择器，尝试以下操作：

$('#add').click(function(){
    $('.information:first').clone().insertAfter('.information:last');
    $('.information:last').find('input').val('');
});

$('#remove').click(function(){
    if ($('.information').length > 1) {
       $('.information:last').remove()
    }
})


<p id='remove'>remove<p>

小提琴

于 2012-08-15T15:17:55.673 回答
1

我会稍微改变它，并像这个jsFiddle 示例那样做。

这允许您添加人员并删除您添加的任何新人员，同时始终只留下第一个人。

HTML

<div id="information">
<label for="name">Name</label>
<input type="text" name="name[]"> 
<label for="last_name">Last Name</label>
<input type="text" name="last_name[]">
</div>
<p id="add">Add another person</p>​

jQuery

$('#add').click(function() {
    $('#information').clone().find("input:text").val("").end().append('<span class="remove">remove</span>').removeAttr('id').insertBefore('#add');

});
$('body').on('click', '.remove', function() {
    $(this).parent('div').remove();
});​
于 2012-08-15T15:18:39.200 回答
0

与其克隆最后一个 div（因为里面有内容），我认为最好将 .information 的内容存储在一个变量中（称之为“内容”）。然后在页面加载时，您可以调用您的“内容”，在添加时，您可以调用“内容”。

如果你愿意，你可以在 .information div 中创建一个按钮，并给它一个点击函数来删除 .information div 的这个实例。

于 2012-08-15T16:12:41.533 回答