0

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

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);
        });
      }
   });

});
4

2 回答 2

1

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

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

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

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

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

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

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

于 2012-06-12T11:31:28.773 回答
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);
        });
    }
});

});

于 2012-06-12T12:24:31.573 回答