javascript - 使用jquery重命名特定范围内的表单元素

Question

我在一个页面上有多个自动生成的表单。它们以特定的方式命名，例如:

form-0-weight、form-1-weight、form-2-weight 等

<ul>
  <li>
    <input id="id_form-0-weight" type="text" name="form-0-weight">
    <a class="deleteIngredient" href="">x</a>
  </li>
  <li>
   ....more forms
  </li>
</ul>

用户可以添加和删除表单。如果删除了某个表单，则应重命名其余表单以保持顺序。例如“form-1-weight”被删除>>“form-2-weight”将被重命名为“form-1-weight”。表单总数存储在名为 TOTAL_FORMS 的隐藏字段中。

我试图通过一个简单的 for 循环来实现这一点。问题是删除后的所有表单都具有相同的名称。例如如果我删除 form-2-weight，则以下所有表单都会获得名称 form-2-weight，而不是 2、3、4 等。

$(".deleteIngredient").click(function(e){
    e.preventDefault();

    var delete = $(this).closest('li');

    name = delete.children('input').attr("name");
    count = name.replace(prefix,'');
    count = name.replace("-weight",'');
    var formCount = parseInt($("#TOTAL_FORMS").val())-1;
    delete.remove();

    for (var i = parseInt(count); i<=formCount; i++){
        var newName = "form-"+i+"-weight";
        $("#id_form-"+(i+1)+"-weight").attr("name",newName);
    }
});

我认为这与我如何选择循环内的元素有关，因为当我仅使用变量“i”而不是“newName”时，它会按预期工作。

Answer 1

问题是你没有正确初始化 i 。发生这种情况是因为“count”不包含在parseInt的条件下可以解析为整数的字符串，我建议你看这里:

w3Schools/parseInt

Note: If the first character cannot be converted to a number, parseInt() returns NaN.

当您将字符串分配给“count”时，您实际上是将字符串“form-i”插入到变量中。
你应该做的是:

count = name.replace(prefix,'');
count = count.replace("-weight",'');

您还应该将“delete”变量重命名为“form”或任何其他描述性名称，因为delete是javascript中的保留字，也是一个操作，因此它并不适合作为对象的名称。不要忘记更改项目的 id 属性，以便它适合新名称。

请注意，您可能应该考虑遵循一些有关 Javascript 或 jQuery 的教程，Tuts+ learn jQuery in 30 days这是我推荐的一个。