用複選框替換所有內容並在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實現這一點。

但是，如果他們點擊「編輯」然後要取消，我需要文本框消失，原始內容顯示備份。我意識到替換會破壞現有的結構。

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

什麼是最好的方式來處理這個與jQuery？

我發現這個how to make jquery-ui.dialog revert a form on cancel似乎做了類似於我需要的東西，但我無法找到任何有助於做我想做的事情。

非常感謝，我期待着回覆！

雅各

Answer 1

這裏有一個小提琴：http://jsfiddle.net/manishie/pZHMN/

它可以使用一些重構，但你想要做什麼。基本上，您將原始值保存爲封閉div的數據屬性。如果用戶保存，則保存新值。如果用戶取消，你搶從數據屬性的舊值，並把該背

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