我在一个页面上有多个自动生成的表单。它们以特定的方式命名,例如:
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”时,它会按预期工作。
最佳答案
问题是你没有正确初始化 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这是我推荐的一个。
关于javascript - 使用jquery重命名特定范围内的表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20706196/