使用jQuery重置列表 [英] Reset a list using jQuery

问题描述

用户可以打开一个编辑器，让他们可重新订购，添加和删除内容，然后保存更改或取消。

保存功能有效。

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

我已经尝试：

  $（'＃staff'）。reset（）; 
  

但这并不奏效。

我想避免使用页面刷新。

我该如何解决这个问题？

解决方案

<$ p

当页面第一次加载时，为未来创建一个列表的副本，然后将列表替换为以后的副本。 （函数（）{
var my_copy = $（'＃list'）。clone（true）;
$（'＃reset_button'）。click（function （）{
$（'＃list'）。replaceWith（my_copy）;
}）;
}）;

文件：

• 克隆


• replaceWith

  $（function（）{
 $（'＃editor_open_button '）.click（function（）{
 $（'＃list'）。data（'my_clone'，$（'＃list'）。clone（true））; 
}）; 
 $（'＃reset_button'）。click（function（）{
 $（'＃list'）。replaceWith（$（'＃list'）。data（'my_clone'））; 
 }）; 
}）; 
  

I have a list (id '#staff') which displays the names of staff stored in the database.

The user can open up a editor which allows them to re-order, add and remove content and then save his changes or cancel.

The save function works.

My problem is when you make changes and click the cancel button and then re-open the editor again the changes are still displayed instead of being reset.

I've tried:

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

but this didn't work.

I want to avoid using a page refresh.

How can I fix this problem?

解决方案

When the page loads for the first time, make a clone of the list for the future, then replace the list with the copy later.

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

Documentation:

• clone
• replaceWith

To make this more flexible, store the clone in the list itself.

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

这篇关于使用jQuery重置列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！