管理取消按钮的方法答案

【问题标题】：Ways to manage Cancel button管理取消按钮的方法
【发布时间】：2012-04-18 21:35:46
【问题描述】：

假设我有一个对话框，其中包含一些复选框、单选按钮、文本输入等，它们代表一些选项。我通过单击页面上的某个链接打开此对话框。我希望能够通过单击对话框中的保存和取消按钮来保存和取消选项。

处理保存按钮看起来很简单 - 我只是通过控件并获取当前值。我想知道的是我应该如何更好地控制取消按钮。因此，我更改了对话框中的一些选项，然后改变主意并单击“取消”按钮。显然我需要在更改之前将所有控件返回到它们的状态。

我怎样才能更好地做到这一点？我应该将对话框加载的当前状态保存到某些隐藏字段或属性吗？请分享您的想法。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我会在打开对话框时复制当前状态，在对话框中修改副本，当用户按下按钮时，将当前状态替换为新状态或简单地删除相应的副本。

【讨论】：

【解决方案2】：

您可以只使用内置重置将表单值恢复为默认值，然后处理保存，这实际上会将状态恢复为更改之前的原始值。

【讨论】：

我能看到的唯一问题是编辑 -> 保存 -> 编辑 -> 取消工作流程。它会一直重置为原始状态，不是吗？
如果他们每次点击编辑时都会以他们的独特信息作为值重新加载页面，那么它将重置为他们的信息。如果页面从未重新加载，则重置将一直回到开头，就好像它们从未编辑/保存过一样。
是的，如果他在 Save 上发帖就可以。根据应用程序可以很好地工作。我以为这都是客户端编辑。

【解决方案3】：

您可以在data 属性中保存当前保存的状态。在 HTML 中，这样的属性看起来像 data-something="some value"，但您可以简单地从 JavaScript 访问它。例如。 jQuery 有它的快捷方式，看起来像jQuery(element_selector).data('something')。您也可以通过 JavaScript 设置它，例如 jQuery(element_selector).data('something', 'some other value')。

使用该机制，您可以最初设置这些值并在每次保存时覆盖它们。如果有人单击“取消”，您只需将控件/表单元素恢复到与您存储为与该元素关联的数据的值相匹配的状态。

请记住，此类数据与 DOM 元素相关联，因此删除它们会删除数据，但在这种情况下，这是一种非常干净和灵活的方法。

关于data- 属性：http://ejohn.org/blog/html-5-data-attributes/
jQuery 的实现：http://api.jquery.com/data/

【讨论】：