Question

我是jQuery的新手，我有一个问题，如果你可以帮助我，我会很感激。

我有一个用户单击链接时生成的表单/元素列表（来自db）。每个元素都有一个用jQuery生成的删除按钮。该按钮将自行删除，如果单击则删除输入文本框。我还有一个添加新的texbox按钮。此按钮可创建新文本框和删除按钮。

我的所有文本框都有一个名称[i] -value;

name[1]  
name[2] 
name[3]
... 
...

问题是，当我删除文本框时，该值只是被移除（如我 - ）。旧值不会更新。在我的帖子上我只能从“按顺序”的文本框中获取值，即如果跳过texbox值，如

name[1]  
name[2]  
name[4] 
name[5]
...

它不会被退回。（在这种情况下，我只会获得值名1和[2]）。

我需要帮助我如何构建数组并将所有值存储到数组中。然后从数组中更新我的所有值。

这是我的javascript代码：

$（function（）{ var scntDiv = $（'＃TextBoxesGroup'）;
var i = $('#TextBoxesGroup p').size();

$('#addButton').live('click', function () {

//行制动以使其更具可读性

 $('<p>
        <label for="Students_' + i + '__Name">Name: </label>
        <input type="text" class="text-box single-line" id="Students_' + i + '__Name" size="20" name="Students[' + i + '].Name" placeholder="Student name..." /> 
        <button id="remove">Remove</button>
    </p>').appendTo(scntDiv);
    i++;
    return false;
});

$('#remove').live('click', function () {
    if (i >= 0) {
        $(this).parents('p').remove();
        i--;
        var array = $('#TextBoxesGroup p')
        alert(array.length);
    }
    return false;
}); });

这是小提琴：

http://jsfiddle.net/6vmMy/1/

Answer 1

我建议你看一下following article，它通过使用默认模型绑定器支持的非顺序索引来说明实现目标的更好方法。这样，在删除元素时，您不会在索引中留下 holes ，这将使您的代码更容易。该文章的作者还提供了一个很好的自定义HTML帮助程序，名为Html.BeginCollectionItem，它允许您隐藏生成正确标记所需的所有管道。

备注：jQuery 1.9中已删除.live()。您应该使用.on()方法。

Answer 2

我觉得你想要至少有一个学生，所以我会把一个放在标记中：

<div id="container">
    <div id="TextBoxesGroup"> <span>
        Press to add textbox and remove button    
         </span>
    </div>
    <p class="students">
        <label>Name:
            <input type="text" class="text-box single-line" size="20" placeholder="Student name..."
            />
        </label>
        <button class="removeStudent">Remove</button>
    </p>
    <input type='button' value="Add more Students" id="addButton"  />
</div>

然后，我只是操纵那个添加更多:(详细显示步骤等，可以巩固一点）

$(function () {
    var scntDiv = $('#TextBoxesGroup');
    $('#addButton').click(function () {
        var lastStudent= $(".students").last();
        var newName =  lastStudent.clone();
        newName.find('.single-line.text-box').val("new student");
        lastStudent.after(newName);
    });
    $('#container').on('click', '.removeStudent', function () {
        if ($('.students').length > 1) {
            $(this).parents('p').remove();
        }
    });
});

这将克隆最后一个，在最后一个之后插入它，并始终保留至少一个学生，并允许删除其中任何一个。否则，我会调查达林提供的答案。

如果DOM被更改，则jquery更新<input name =“[i]”/>

2 个答案: