管理取消按钮的方法

Question

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

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

我该如何做得更好？我应该将对话框加载时的当前状态保存到某些隐藏字段或属性吗？请分享您的想法。

Answer 1

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

Answer 2

您可以使用内置重置将表单值返回到默认值，然后处理保存，这实际上会在更改之前将状态返回到原始值。

Answer 3

您可以将当前保存的状态保存在data属性中。在HTML中，此类属性看起来像data-something="some value"，但您只需从JavaScript访问它。例如。 jQuery有快捷方式，看起来像jQuery(element_selector).data('something')。您也可以使用jQuery(element_selector).data('something', 'some other value')等JavaScript设置它。

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

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

更多：

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