0 
<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でこれにアプローチする最良の方法は何でしょうか？

jquery-ui.dialogをキャンセル時にフォームを元に戻す方法を見つけました。これは、必要なことと似たようなことをしているように見えましたが、希望することを行うのに役立つものを見つけることができませんでした。

どうもありがとうございました、そして私は返事を楽しみにしています！

ジェイコブ

4

1 に答える 1

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', '');   
    });            
});​
于 2012-11-08T01:11:50.857 に答える