0

我是 jQuery 新手，如果您能帮助我，我会遇到一个问题。

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

我所有的文本框都有一个 name[i] -value；

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

问题是当我删除一个文本框时，该值将被删除（如 i--)。旧值不会更新。在我的回帖中，我只从“按顺序”的文本框中获取值，即如果一个 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;
}); });

这是小提琴：

4

2 回答 2

1

我感觉您希望至少有一个学生，所以我会在标记中添加一个：

<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();
        }
    });
});

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

于 2013-02-18T14:17:48.357 回答
1

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

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

于 2013-02-18T13:07:54.867 回答