2

ユーザーが少しのテキストでdiv要素をクリックし、編集後にクリックするテキストボックスとグラフィックに置き換えることができるスクリプトを作成しようとしています。グラフィックをクリックすると、テキストボックスとグラフィックが新しく編集されたテキストのビットに置き換えられます。h1h1divh1

関数は次のとおりです。

function savename() {
    var s = $('#mytextbox').val();
    $('#mydiv').replaceWith('<div id="mydiv" onclick="editname();"><h1>' + s + '</h1></div>');
}
function editname() {
    var strName = $('#mydiv').text();
    $('#mydiv').replaceWith($('<div id="mydiv"><input id="mytextbox" name="mytextbox" type="text" value="' + strName + '"><img id="mysavebutton" src="images/save.gif" onclick="savename();"></div>'));
}

そして、ここにdivがあります：

<div id="mydiv" onclick="editname();"><h1>Some text I want to edit</h1></div>

したがって、divクリック機能は正常に機能します。h1要素をテキストボックスに置き換えます。グラフィックの保存をクリックすると、それも正常に機能し、h1. 問題は、テキストボックスの値がh1'd テキストであると想定されていることです。その部分は機能していません。旧値のままです。「s」に設定した後にアラートを設定しましたが.val()、編集後も古い値が表示されます。シンプルなものが欠けているように感じますが、一日中それと戦ってきたので、それを見てくれる新鮮な目が必要です. 前もって感謝します。

4

2 に答える 2

0

mydivを置き換えてmydivを再作成する代わりに、クリック時にmydivを非表示にして、保存しようとしたときにh1タグの値を変更してみませんか？

HTMLでは、次のようなものを使用できます。

<div id="mydiv">
    <h1 id="myoutput" onclick="editname();"> ... </h1>
    <input id="mytextbox" name="mytextbox" type="text" style="display:none;">
    <img id="mysavebutton" src="images/save.gif" onclick="savename();" style="display:none" /> 
</div>

次に、JavaScriptで：

function editname()
{
    var s = $('#myoutput').text();
    $('#myoutput').css('display', 'none');
    $('#mytextbox').val(s).css('display','inline');
    $('#mysavebutton').css('display', 'inline');
}
function savename()
{
    var s = $('#mytextbox').val();
    $('#myoutput').text(s).css('display', 'inline');
    $('#mytextbox').css('display', 'none');
    $('#mysavebutton').css('display', 'none');
}
于 2012-10-30T02:52:55.110 に答える
0

これは私にとってはうまくいき、ネイティブES5（ECMAScript 5仕様）です-ライブラリはありません

(フィドル)

JavaScript:

document.addEventListener("DOMContentLoaded", function() {
    "use strict";

    var divElem = document.getElementById("div"),
        textInputElem = document.createElement("input"),
        buttonElem = document.createElement("input");

    textInputElem.type = "text";
    buttonElem.type = "button";
    buttonElem.value = "Apply";

    function removeChildren(elem) {
        while (elem.firstChild) {
            elem.removeChild(elem.firstChild);
        }
    }

    function divClick() {
        removeChildren(divElem);
        divElem.appendChild(textInputElem, divElem.firstChild);
        divElem.appendChild(buttonElem);
        divElem.removeEventListener("click", divClick, true);
    }

    buttonElem.addEventListener("click", function() {
        var textNode;

        if (textInputElem.value !== "") {
            removeChildren(divElem);
            textNode = document.createTextNode(textInputElem.value);
            divElem.appendChild(textNode);
            divElem.addEventListener("click", divClick, true);
        }
    }, false);
    divClick();
}, false);

HTML:

<div id="div"></div>​

Element.AddEventListener() に関する MDN ドキュメントは次のとおりです。MDN: AddEventListener

于 2012-10-30T04:41:40.187 に答える