2

テーブルを表示するとき、divファイルをクリックしてテキスト領域に変更するとき、およびdivの外側をクリックするときにdivファイルに戻すときに使用しているPHPadminのような関数を作成しようとしています。以下のコードは間違っています。外側をクリックすると、ファイルされたdivに戻ることができません。コードを改善するのを手伝ってください。

JS：

$('#editor #gird_edit').bind({
  click: function() {
            $(this).html('<textarea id="gird_edit">'+$(this).text()+'</textarea>');
  },
  blur: function() {
            $(this).html('<div id="gird_edit">'+$(this).text()+'</div>');
  }
});

HTML：

<div id='editor'>
<div id='gird_edit'>hallo world</div>
<div id='gird_edit'>hallo world 2</div>
<div id='gird_edit'>hallo world 3</div>
</div>

私は8つの評判しか持っていません、私はあなたに投票することはできません。しかし、私はあなたの助けに心から感謝します！

4

3 に答える 3

2

私が作ったばかりのこのjsbinをチェックしてください。他に何か必要な場合は、喜んでお手伝いします。

于 2012-12-22T01:44:40.697 に答える
1

jsfiddleを参照してください

更新されたjsfiddle

$(this).html(textarea)行われるとき、divすでにぼやけています。そのため、onBlurは機能しませんでした

$('#editor #gird_edit').bind({
    click: function() {
        var tex = $(this).text();
        var textarea = $('<textarea id="gird_edit">'+tex+'</textarea>');
        $(this).html(textarea);
        textarea.focus();
        textarea.blur(function(){
            var currentText = textarea.val();
            if(currentText == tex)//not change
                textarea.parent().text(tex);
            else //changed
                alert(currentText);
        });
    }
});

編集3：

else{
    textarea.parent().text(currentText);
    //something else
}

より多くのjqueryAPIを見つける

于 2012-12-22T01:48:56.923 に答える
1

最初に をクリックすると、#gird_editそれは div でthisあり、div であり、内容を変更して変更することができます。ただし、ぼかす#gird_editとテキストエリアなので、その内容を変更しても、変更したいものは実際には変更されません (テキストエリアの内部を変更するだけです)。

変更したいのは、テキストエリアの周りにある div です。そのテキストエリアの「親」。つまり、次のことを試してください。

blur: function() {
        $(this).parent().html('<div id="gird_edit">'+$(this).text()+'</div>');
}
于 2012-12-22T01:44:01.470 に答える