2

我正在尝试制作一个类似于 PHPadmin 的函数，它们在显示表格时使用，当单击 div 字段时，更改为文本区域，当单击 div 外部时，将其更改回 div 字段。下面的代码是错误的，当我点击外部时，我无法更改回 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

当你第一次点击#gird_edit它是一个 div 时，它也是一个 div this，你可以替换它的内容来改变东西。然而，当你模糊了#gird_edit一个文本区域，所以如果你改变它的内容，你并没有真正改变你想要改变的东西（你只是改变了你的文本区域的内部）。

您要更改的是文本区域周围的 div，即。该文本区域的“父级”。换句话说，尝试：

blur: function() {
        $(this).parent().html('<div id="gird_edit">'+$(this).text()+'</div>');
}
于 2012-12-22T01:44:01.470 回答
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
}

查找更多jquery API

于 2012-12-22T01:48:56.923 回答