Question

我使用下面的代码尝试构建一个双击的简单内联编辑功能，我有css，ajax等编写得很好（未显示）。问题是，当我编辑了所选文本时，它会变得很好，但也会将页面上的所有其他文本更改为新输入的文本。有没有人对为什么会这样做以及可能的解决方案有任何建议？

(function($) {
    $.fn.editable = function() {
        $('#id').val($(this).attr('id'));
        var id = $(this).attr('id');
        var textBlock = $(this);
        var textBox = $('<input type="text"/>');
        textBox.hide().insertAfter(textBlock).val(textBlock.html());
        textBlock.dblclick(function() {
            toggleVisiblity(true);
        });

        textBox.blur(function() {
            toggleVisiblity(false);
        });

        toggleVisiblity = function(editMode) {
            if (editMode == true) {
                textBlock.hide();
                textBox.show().focus();
                textBox[0].value = textBox[0].value;
            }
            else {
                textBlock.show();
                textBox.hide();
                textBlock.html(textBox.val());
            }
        };
    };
})(jQuery);

$(function() {
    var $edit = $('.edit').editable('#id');
});

<p class="edit">Test text 1</p>
<p class="edit">Test text 2</p>

Answer 1

不确定你的目标是什么，但是html提供了一个名为＆＃34; contenteditable＆＃34;已经允许内联编辑。请看这里：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Answer 2

必须对正在 dblclicked 的当前元素执行操作。修改了您的代码以便相应地工作。

Fiddle

(function($) {
    $.fn.editable = function() {
        $('#id').val($(this).attr('id'));
        var id = $(this).attr('id');
        var textBlock;
        var textBox = $('<input type="text"/>');

        $(this).dblclick(function() {            
            textBlock = $(this);
            $(this).hide();
            textBox.hide().insertAfter(textBlock).val(textBlock.html());
            textBox.show().focus();
            textBox[0].value = textBox[0].value;
        });

        textBox.blur(function() {
             textBlock.show();
                textBox.hide();
                textBlock.html(textBox.val());
        });
    };
})(jQuery);

jquery内联编辑器行为

2 个答案: