还原以前的状态javascript

假设我想通过单击一个文本来修改它，它会变成一个输入文本字段以及两个按钮，保存和取消，如下所示（单击事件已被省略，我使用jquery中的replaceWIth（））

转型前：

<span>text<input type="button" value="delete"</span>

<input type="text"><input type="button" value="save"><input type="button" value="cancel">

text试试这个：

<span id="before">text<input type="button" value="delete" id="delete"/></span>      

<span id="after">
    <input type="text">
    <input type="button" value="save" id="save"/>
    <input type="button" value="cancel" id="cancel"/>
</span>     

<script>
    $('document').ready(function() {
        // Initially hide
        $('#after').css('display','none');

        $('#delete').click(function() { showAfter(); });
        $('#save').click(function() { hideAfter(); });
        $('#cancel').click(function() { hideAfter(); });



        function showAfter() {
            $('#after').css('display','block');
            $('#before').css('display','none');
        }


        function hideAfter() {
            doSomething();
            $('#after').css('display','none');
            $('#before').css('display','block');
        }


        function doSomething() {
            alert('I just did something!');
        }
    });

</script>

文本
$（'document'）.ready（函数（）{
//最初隐藏
$（'after'）.css（'display'，'none'）；
$（“#删除”）。单击（函数（）{showAfter（）；}）；
$（'#save'）。单击（函数（）{hideAfter（）；}）；
$（“#取消”）。单击（函数（）{hideAfter（）；}）；
函数showAfter（）{
$（'#after'）.css（'display'，'block'）；
$（'before'）.css（'display'，'none'）；
}
函数hideAfter（）{
doSomething（）；
$（'after'）.css（'display'，'none'）；
$（'before'）.css（'display'，'block'）；
}
函数doSomething（）{
警惕（“我刚做了点什么！”）；
}
});
等待印度对WI的比赛结束后才发布：）

这就是你想要的：

它使用live，因此可以多次工作。如果有多个行，它也可以工作，因为它简单地选择父行，而不依赖于只有一行

<span class='text'>text<input type="button" class='deleteButton' value="delete"></span>

$('span.text').live('click', function(){
    var $this = $(this);
    $this.data('oldText', $this.html());
    var newText = '<input  class="theText" type="text"><input class="saveButton"  type="button" value="save"><input class="cancelButton"  type ="button" value="cancel">';
    $this.html(newText);
});

$('.cancelButton').live('click', function(e){
    var $this = $(this); 
    var parent = $this.parent('span');
    parent.html(parent.data('oldText'));
    e.stopPropogation();
});

$('.saveButton').live('click', function(){
    //do something on save
    e.stopPropogation();
});


$('.theText, .deleteButton, cancelButton').live('click', function(){
    e.stopPropogation();
});

文本
$（'span.text'）.live（'click'，function（）{
var$this=$（this）；
$this.data（'oldText'，$this.html（））；
var newText=''；
$this.html（newText）；
});
$（'.cancelButton'）.live（'click'，函数（e）{
var$this=$（this）；
var parent=$this.parent（'span'）；
html（parent.data（'oldText'）；
e、 停止传播（）；
});
$（'.saveButton'）.live（'单击'，函数（））{
//省钱做点什么
e、 停止传播（）；
});
$（'.theText、.deleteButton、cancelButton'）.live（'单击'，函数（））{
e、 停止传播（）；
});

使用jqery数据对象以每个跨度为基础存储旧状态
 您正在尝试实现内联编辑。使用JavaScript库可以更好地完成这项任务。大多数JavaScript库都有可以进行内联编辑的模块（或插件）——文本到文本框、数字到微调器框等等。我不建议重新创建一些库程序员团队已经在所有可能的浏览器平台上花了数小时调试的东西

例如，Dojo工具包有dijit.inlineEditBox，它只需要很少的编码，就可以完成您想要的大部分工作。它使用一个隐藏的文本框来保存上一个值

jQuery有“原地编辑”插件。
这是一个新想法，我会试试看。谢谢谢谢你，我想我理解你的代码，但是这条线有什么用呢？var$this=$（this）；在两个地方？谢谢，这只是缓存jquery对象，所以我们不会让jquery一次又一次地拉选择器。只是性能提升。好的，谢谢，我刚刚测试了一下，我猜你的代码有一个主要问题，我不知道是我的问题还是什么，但是我似乎无法键入由单击功能生成的文本字段。哇！那是我的错。由于您的标记指示跨度必须包含它，因此单击事件阻碍了它。现在排序：）新建小提琴：您的HTML代码无效。您的输入标记缺少
>
<span class='text'>text<input type="button" class='deleteButton' value="delete"></span>

$('span.text').live('click', function(){
    var $this = $(this);
    $this.data('oldText', $this.html());
    var newText = '<input  class="theText" type="text"><input class="saveButton"  type="button" value="save"><input class="cancelButton"  type ="button" value="cancel">';
    $this.html(newText);
});

$('.cancelButton').live('click', function(e){
    var $this = $(this); 
    var parent = $this.parent('span');
    parent.html(parent.data('oldText'));
    e.stopPropogation();
});

$('.saveButton').live('click', function(){
    //do something on save
    e.stopPropogation();
});


$('.theText, .deleteButton, cancelButton').live('click', function(){
    e.stopPropogation();
});