jquery - 使用 jQuery 重置列表

Question

我有一个列表（id '#staff'），其中显示了存储在数据库中的员工姓名。

用户可以打开一个编辑器，允许他们重新排序、添加和删除内容，然后保存他的更改或取消。

保存功能有效。

我的问题是当您进行更改并单击取消按钮然后再次重新打开编辑器时，更改仍会显示而不是被重置。

我试过了：

$('#staff').reset();

但这没有用。

我想避免使用页面刷新。

我该如何解决这个问题？

Answer 1

当页面第一次加载时，为将来制作列表的克隆，然后用副本替换列表。

$(function() {
    var my_copy = $('#list').clone(true);
    $('#reset_button').click(function(){
        $('#list').replaceWith(my_copy);
    });
});

文档：

• 克隆
• 用。。。来代替

为了使其更加灵活，请将克隆存储在列表本身中。

$(function() {
    $('#editor_open_button').click(function() {
        $('#list').data('my_clone',$('#list').clone(true));
    });
    $('#reset_button').click(function(){
        $('#list').replaceWith($('#list').data('my_clone'));
    });
});

Answer 2

您应该将原始内容存储在变量中。

Answer 3

您将需要保存控件/数据的状态。然后，如果单击取消按钮，则使用保存的数据覆盖控件的所有值。