编辑元素的 ID + 制作插件

Question

我有一些DIV和脚本，可以编辑此DIV中的文本。单击时 - 脚本将 DIV 替换为文本区域，用户可以编辑文本。在模糊时 - 脚本必须删除文本区域并将编辑后的文本插入到 DIV 中。1.但是脚本替换了页面中的所有DIV，而不仅仅是编辑过的DIV...2.我想从这个脚本制作插件。编辑其他元素，如 H1、H2。等。。。

http://jsfiddle.net/ynternet/4a44G/1/

.HTML

<div>Please click me DIV 1!!</div>
<div>Please click me DIV 2!!</div>
<div>Please click me DIV 3!!</div>
<h1>Please click me H1 1!!</h1 >
<h1>Please click me H1 2!!</h1 >
<h1>Please click me H1 3!!</h1 >

jQuery

 $(document).ready(function() {     
   $("div").click(function() {
       if ($(this).children('input').length === 0) {
            var inputbox = "<input type='text' class='inputbox' value=""+$(this).text()+"">";
          $(this).html(inputbox);
          $("input.inputbox").focus();         
          $("input.inputbox").blur(function() {
             var value = $(this).val();
             $("div").text(value);
        });
      }
   });
});

Answer 1

试试这个$（document）.ready（function（） {

$("div").click(function() {
    if ($(this).children('input').length === 0) {
            var nID=$(this);
        var inputbox = "<input type='text' class='inputbox' value=""+$(this).text()+"">";
        $(this).html(inputbox);
        $("input.inputbox").focus();         
        $("input.inputbox").blur(function() {
            var value = $(this).val();
            $(nID).text(value);
        });
    }
});

 $("h1").click(function() {
    if ($(this).children('input').length === 0) {
            var nID=$(this);
        var inputbox = "<input type='text' class='inputbox' value=""+$(this).text()+"">";
        $(this).html(inputbox);
        $("input.inputbox").focus();         
        $("input.inputbox").blur(function() {
            var value = $(this).val();
            $(nID).text(value);
        });
    }
});

}）;

Answer 2

看看这个小提琴： http://jsfiddle.net/4a44G/13/

$("div").text(value);

选择类型 div 的所有元素，但您必须选择父div 文本框，因此您必须编写：

$("input.inputbox").blur(function() {
    var value = $(this).val();
    $(this).parent().text(value);
});

如果标记可以更改，您还可以编写：

$(this).closest('div').text(value);

小提琴：http://jsfiddle.net/4a44G/9/