用复选框替换所有内容并在jQuery中取消取消

Question

<div>
    <div class="first">First Name</div>
    <div class="last">Last Name</div>


    <div class="edit">edit</div>
</div>

按下编辑时，我希望将 .first 和 .last 中的内容替换为文本框，其中包含文本框内 div 的内容。本质上，使内容明显可编辑。

我能够通过 replaceWith 实现这一点。

但是，如果他们单击“编辑”然后想取消，我需要文本框消失并显示原始内容。我意识到 replaceWith 会破坏现有结构。

我有使用克​​隆的想法，但我不确定这是否有效。

用 jQuery 解决这个问题的最佳方法是什么？

我发现了这个how to make jquery-ui.dialog revert a form on cancel，它似乎做了一些与我需要的事情相似的事情，但我无法在其中找到任何可以帮助我做我想做的事情的东西。

非常感谢，期待回复！

雅各布

Answer 1

这是一个小提琴：http://jsfiddle.net/manishie/pZHMN/

它可以使用一些重构，但它会做你想要的。基本上，您将原始值保存为封闭 div 的数据属性。如果用户保存，则保存新值。如果用户取消，您从 data 属性中获取旧值并将其放回原处。

HTML：

<form id="theform">
    <div>
        <div class="first editable">First Name</div>
        <div class="last editable">Last Name</div>


        <div class="edit">edit</div>
        <div class="save" style="display:none;">save</div>
        <div class="cancel" style="display:none;">cancel</div>
    </div>
</form>​

Javascript：

$('.edit').click(function() {
    $('.edit').hide();
    $('.save,.cancel').show();

    $('.editable').each(function(index, el) {
        $(el).attr('data-orig', $(el).html());           
        $(el).html('<input type="text" value="' + $(el).attr('data-orig') + '">');
    });
});    

$('.save').click(function() {
    $('.edit').show();
    $('.save,.cancel').hide();

      $('.editable').each(function(index, el) {
        $(el).attr('data-orig', '');   
        $(el).html($(el).find('input').val());
    });            
});

$('.cancel').click(function() {
    $('.edit').show();
    $('.save,.cancel').hide();

      $('.editable').each(function(index, el) {
        $(el).html($(el).attr('data-orig'));
        $(el).attr('data-orig', '');   
    });            
});​