2

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

以下是功能：

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 Spec) - 没有库

（小提琴）

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 回答