Question

我有一些DIV和脚本，可以编辑这个DIV中的文本。单击 - 脚本将DIV替换为TEXTAREA，用户可以编辑TEXT。模糊 - 脚本必须删除TEXTAREA并将编辑后的文本插入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

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

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

选择div类型的所有元素，但你必须选择文本框parent div，所以你必须写：

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

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

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

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

Answer 2

试试这个 $（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);
        });
    }
});

}）;

已编辑元素的ID + make插件

2 个答案: