3

私は最近、このフィドルhttp://jsfiddle.net/GeJkU/を使用しています

    function divClicked() {
        var divHtml = $(this).html();
        var editableText = $("<textarea />");
        editableText.val(divHtml);
        $(this).replaceWith(editableText);
        editableText.focus();
        // setup the blur event for this new textarea
        editableText.blur(editableTextBlurred);
    }

    function editableTextBlurred() {
        var html = $(this).val();
        var viewableText = $("<div>");
        viewableText.html(html);
        $(this).replaceWith(viewableText);
        // setup the click event for this new div
        viewableText.click(divClicked);
    }

    $(document).ready(function () {
        $("div").click(divClicked);
    });

divをクリックすると、divタグがテキストエリアに置き換えられます。私の質問は、上記の JavaScript を使用してボタンをクリックしたときに、div タグを textarea に置き換えるにはどうすればよいですか?

助言がありますか？

4

7 に答える 7

5

あなたの質問を理解したと仮定すると、以下を試すことができます。

HTML:button以下の like をすべての後に追加しますdiv。

<div>If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.</div>
<button class='btn'>Edit</button>

jQuery:以下のようにコードを修正します。

function divClicked() {
    var divHtml = $(this).prev('div').html(); //select's the contents of div immediately previous to the button
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    $(this).prev('div').replaceWith(editableText); //replaces the required div with textarea
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
}

function editableTextBlurred() {
    var html = $(this).val();
    var viewableText = $("<div>");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
    viewableText.click(divClicked);
}

$(document).ready(function () {
    $(".btn").click(divClicked); //calls the function on button click
});

ワーキングデモ

于 2013-09-02T05:01:03.103 に答える
0

div 内に textarea 要素を配置しない理由

$("#button_id").click(function(){ 
    $("#div_id").html('<textarea></textarea>');
})
于 2013-09-02T04:53:25.257 に答える
0

代わりにこれを試しましたか：

$(document).ready(function() {
    $("div").click(function(){
        divClicked($(this));
    });
});

次に、divClicked 関数を少し変更して、渡される jquery オブジェクトに対応します。

function divClicked(theObject) {
    var divHtml = theObject.html();
    var editableText = $("<textarea />");
    editableText.val(divHtml);
    theObject.replaceWith(editableText);
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
}
于 2013-09-02T04:53:40.497 に答える
0

デモを見る....

html 

<div>If no background color is set on the Element, or its background color is set to 'transparent', the default end value will be white.</div>
<div>Element shortcut method for tweening the background color. Immediately transitions an Element's background color to a specified highlight color then back to its set background color.</div>
<div>Element shortcut method which immediately transitions any single CSS property of an Element from one value to another.</div>

<button id="buttonclick">click</button>

js

function divClicked() {
    var divHtml = [];
    $("div").each(function(){
    divHtml.push($(this).html());
     var editableText = $("<textarea />");
    editableText.val($(this).html());
    $(this).replaceWith(editableText);
     editableText.blur(editableTextBlurred);
    });
    editableText.focus();
    // setup the blur event for this new textarea

}

function editableTextBlurred() {
    var html = $(this).val();
    var viewableText = $("<div>");
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    // setup the click event for this new div
    viewableText.click(divClicked);
}

$(document).ready(function() {
    $("#buttonclick").click(divClicked);
});

CSS

div {
    margin: 20px 0;
}

textarea {
    width: 100%;
}
于 2013-09-02T04:57:42.587 に答える
0

まず、次のようなボタンを作成する必要があります

<input type="button" value="Click me" id="btn1" />

次に、ドキュメント準備完了関数で次のコードを使用します

   $('#btn1').click(function () {
        divClicked.call($('div#one'));
    });

注:one最初の div に id を割り当てました。

作業フィドルを参照してください

于 2013-09-02T04:58:59.350 に答える