Question

如果我更改输入值并希望将其重置回原始值onClick链接我该如何实现？

我可以使用.data（）来获取和存储原始值，但我不确定在需要时还原它的最佳方法。

HTML：

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

这就是我认为它会起作用的方式......

在上面的HTML中，输入将以值“100”呈现。如果我然后单击“编辑”，我可以使用.date（）来存储原始值（100）。然后我可以更改输入的值，但是如果我想重置它的原始状态，我需要调用.data（）信息并使用它来恢复输入的值。

我如何使用jQuery做到这一点？

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"));
             });

我没有测试它，但它应该工作

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'));                       
                   });
         });

如果更改，如何将值重置为其原始状态

2 个答案: