0

この DIV 内のテキストを編集できる DIV とスクリプトがいくつかあります。クリックすると、スクリプトは DIV を TEXTAREA に置き換え、ユーザーは TEXT を編集できます。ぼかしの場合 - スクリプトは TEXTAREA を削除し、編集したテキストを DIV に挿入する必要があります。1.しかし、スクリプトは、編集されたものだけでなく、ページ内のすべてのDIVを置き換えます... 2.このスクリプトからプラグインを作りたいです。H1、H2 などの他の要素を編集するには。等...

http://jsfiddle.net/yinternet/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 に答える