Question

说我想通过点击来修改文本，它会转到输入文本字段和两个按钮，保存和取消如下（点击事件已被省略，我使用jquery的replaceWIth（））

转型前：

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

转型后：

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

我想要做的是如果我单击取消按钮，没有任何反应，“转换后”部分可以恢复到原始部分，就像它之前的样子一样

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

任何方式这样做？我想我应该以某种方式“保存”，然后转换成“快照”图片或其他东西。任何的想法？谢谢

Answer 1

等到印度vs WI比赛结束后才发布：）

这就是你想要的：http://jsfiddle.net/G8Kaj/4/

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

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

使用jqery数据对象以每个跨度为基础存储旧状态。

Answer 2

试试这个：

<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>

Answer 3

您正在尝试实施内联编辑。使用JavaScript库可以更好地完成这项任务。大多数JavaScript库都有可以进行内联编辑的模块（或插件） - 文本到文本框，数字到微调框等。我不建议重新创建一些图书馆程序员团队已经在所有可想到的浏览器平台上花费数小时调试的东西。 / p>

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

jQuery具有Edit-in-Place插件。

恢复以前的状态javascript

3 个答案: