Jquery递增字段名称答案

【问题标题】：Jquery Incrementing field namesJquery递增字段名称
【发布时间】：2014-10-08 16:27:08
【问题描述】：

继我之前的question

我现在有一个表单，当单击添加时，它会向表单添加一个新的输入字段，每次将字段名称和输入文本递增一个。例如：phone_number1、phone_number2 等

我使用的 jquery 是：

$(document).ready(function(){
    var phone_number_form_index=1;
    $("#add_phone_number").click(function(){
        phone_number_form_index++;
        $(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
        $("#phone_number_form" + phone_number_form_index).css("display","inline");
        $("#phone_number_form" + phone_number_form_index + " :input").each(function(){
            $(this).parent().find('span').text('Phone number ' + phone_number_form_index);
            $(this).attr("name",$(this).attr("name") + phone_number_form_index);
            $(this).attr("id",$(this).attr("id") + phone_number_form_index);
            });
        $("#remove_phone_number" + phone_number_form_index).click(function(){
            $(this).closest("div").remove();
        });
    }); 
});

这个 JFiddle 展示了表单的工作情况，当添加新行时，字段名称会随着输入文本的增加而增加。 http://jsfiddle.net/yezw6c51/25/

但是，如果我删除一个字段，编号可能会变得混乱。

例如：

对于一个字段，输入文本和字段名称是电话号码 1 / 电话号码1
有两个字段，输入文本和字段名称是电话号码 1 和电话号码 2 等
对于三个字段，输入文本和字段名称是电话号码 1 和电话号码 2 和电话号码 3 等

如果我随后使用删除按钮删除电话号码 2，我最终会得到 1 和 3，点击添加从 4 开始。

如果我删除 2 而不是 1 和 3 有什么办法，我会得到 1、2 并且下一个添加是 3 吗？

这需要更新所有正在更新的字段名称和输入文本条目。

【问题讨论】：

我不会承担所有这些开销。处理起来似乎有点多（你能想象如果你有 10 多个数字吗？）。为什么要重新计算所有索引？
服务器端有什么理由不使用phone_number[]？
你可以这样做，但你会经常遇到这样的问题。您需要做的是将您的 data 与您的 display 逻辑分开。看看 Addy Osmani 的学习 JavaScript 设计模式的这一部分来理解这个概念：addyosmani.com/resources/essentialjsdesignpatterns/book/…
@Mooseman - 我可能会使用服务器端，但我想看看如何返回输出。我今天会做一些测试，所以一旦我知道返回什么信息以及以什么格式返回。

标签： javascript jquery

【解决方案1】：

添加/删除后，您可以重新编号所有输入和标签，如下所示：

$(document).ready(function(){
    $("#add_phone_number").click(function(){
        $(this).parent().before($("#phone_number_form").clone().show());
        reNumberInputs();
    });

    $("form").on("click", "[id^='remove_phone_number']", function(){
        $(this).closest("div").remove();
        reNumberInputs();
    });    
});

function reNumberInputs() {
    $("input[type='text']:visible").each(function(index, element) {
        var displayIndex = (index + 1).toString();
        element.id = "phone_number" + displayIndex;
        element.name = "phone_number" + displayIndex;
        if (index > 0) {
            $(this).prev("span").html("Phone number " + displayIndex);
            $(this).next("input").prop("id", "remove_phone_number" + displayIndex).prop("name", "remove_phone_number" + displayIndex);
        }
    });
}

.hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="phone_number_form" class="hidden">
    <p>
        <span>Phone number</span> : <input type="text" name="phone_number" /> 
        <input type="button" id="remove_phone_number" value="Remove" />
    </p>
</div>
<form>
    <p>
        Phone number : <input type="text" name="phone_number1" /> 
    </p>
    <p>
        <input type="button" value="Add phone number" id="add_phone_number" />
    </p>
</form>

更新Fiddle

【讨论】：

谢谢，这似乎符合我的要求。是否可以将其限制为最多只允许 5 个电话号码字段？
发现了一个错误。运行时添加 2 个新的电话号码字段。这些是正确命名和编号的 name="phone_number2" id="phone_number2" 和 name="phone_number3" id="phone_number3"。如果您删除电话号码 2，则电话号码 3 的文本更改为 2，id 更改为 phone_number2，但名称仍为 phone_number3，这意味着提交时将与电话名称相对。无论如何也要获得正确的名称值？
element.name = "phone_number" + displayIndex; 已整理出名称值...现在删除按钮的值错误，如果这不会导致问题，我希望全部匹配！
刚刚发现了一个错误 :( 使用你的小提琴 - 添加 2 个新的电话号码字段。删除它们，然后添加另一个新的。你不能删除它。添加很好删除失败。无论如何那个？
那个代码有点乱。我把它清理得很干净。现在应该可以了。

【解决方案2】：

您可以将字段名称用作 phone_number[]，这将是标准。
如果您无法更改程序，则在提交表单时重命名您的字段，方法是逐一获取所有创建的文本并将当前文本字段值分配给新字段，但这不是标准方法。

希望您能得到答案，如果您有任何其他问题，请在我的新博客 http://www.sourabhmodi.in/ 上与我联系。我很乐意帮助你..

【讨论】：