如何在更改后将值重置为其原始状态

Question

如果我改变了一个输入框的值，并且想要在单击链接时将其重置回原始值，我该如何实现？

我可以使用 .data() 方法来获取和存储原始值，但是我不确定恢复它的最佳方法。

HTML：

<input class="someClassName" type="text" value="100" /> 
<a href="#">Edit</a>
<a href="#">Reset</a>

这是我认为它的工作原理... 在上面的HTML中，输入框将呈现一个值为“100”的值。如果我然后点击“编辑”，我可以使用.date()存储原始值（100）。然后我可以更改输入框的值，但如果我想将值重置回原始状态，我需要调用.data()信息并使用它来恢复输入框的值。如何使用jQuery实现这一点？

- say

Answer 1

使用.data非常适合这种情况。不需要再找其他方法。

更新 - 附带一些代码指示

假设你想对许多输入字段进行此操作，而不仅仅是一个。我假设每个输入+编辑+重置都包含在一个单独的父元素中。

<div>    
    <input class="someClassName" type="text" value="100" /> 
    <a class="EditLink" href="#">Edit</a>
    <a class="ResetLink" href="#">Reset</a>
</div>

在您的init脚本块中

$(".EditLink").click(
             function() {
                $(this).parent().children("INPUT").data("val",
                  $(this).parent().children("INPUT").val());
             });
$(".ResetLink").click(
             function() {
                $(this).parent().children("INPUT").val(
                  $(this).parent().children("INPUT").data("val"));
             });

我没有测试过，但它应该可以正常工作。

- Variant

---

这正是我所想的，但我正在寻求代码方面的帮助。 - say

你说得对，在一个页面上有许多这样的东西。它可以工作，http://jsfiddle.net/hPQ3w/ 我应该对.removeData()做些什么吗？ - say

你并不一定需要这样做，但当你不再需要数据时进行清理是一个好习惯。 - Variant

Answer 2

我建议给您的输入框添加一个id，然后引用它。

<input class="someClassName" id="theInput" type="text" value="100" /> 
<a href="#" id="Edit">Edit</a>
<a href="#" id="Reset">Reset</a>

<script type="text/javascript">
        $(document).ready(function{
            $("#Edit").click(function{
                   $("#theInput").data('originalValue',$("#theInput").val());
                   });
            $("#Reset").click(function{
                   $("#theInput").val($("#theInput").data('originalValue'));                       
                   });
         });

- Tom B

---

谢谢回复，汤姆。这个可以用，但我需要 Variant 做的那种变化，因为页面上会有多个这样的。 - say