Question

我正在尝试创建一个脚本，允许用户点击带有div'位文本的h1元素，然后将h1替换为文本框和图形编辑后点击。单击图形后，div将使用新编辑的h1'd位文本替换文本框和图形。

以下是功能：

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文本。那部分不起作用。它仍然保留旧的价值。在将其设置为.val()之后，我为“s”发出警报，即使在编辑之后，它仍会显示旧值。我觉得我错过了一些简单的东西，但我整天都在和它斗争，需要一些新鲜的眼睛来为我看。提前谢谢。

Answer 1

不是替换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');
}

Answer 2

这对我有用，并且是原生ES5（ECMAScript 5 Spec） - 没有库

（fiddle）

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

表单元素不返回新值

2 个答案: