Question

我认为我已经搜索了足够长的时间以保证这一点，并且我希望我不会错过一些明显的东西，但是我的斗智尽头。我是一个完整的JavaScript菜鸟，我很难找到一个我在网上找到的脚本才能正常工作。

我被分配的项目是为了实现它，所以可以通过单击按钮扩展这个表单，我认为我只能用HTML完成它，但这似乎不可能。我找到了这个脚本，并且能够让它的重复部分工作：

http://www.quirksmode.org/dom/domform.html

但是，脚本中应该为字段名称附加计数器的部分不起作用，因此在提交表单时，所有内容都记录在第一个表单的name值下。我的猜测是脚本的那部分试图得到错误节点的名称，但我真的不知道。这是我所拥有的缩短版本。丑陋，但希望它得到了重点......

如果我能澄清，请告诉我，并且非常感谢任何帮助！

Answer 1

重新组织代码，您可以使用以下内容：

(function () {
    "use strict";

    var counter, init, addWorkshop, renameInputs, removeWorkshop;

    counter = 0;

    init = function () {
        document.getElementById("moreWorkshops").onclick = addWorkshop;
        addWorkshop();
    };

    addWorkshop = function () {
        var clonedWorkshop, targetInsert;

        counter++;

        clonedWorkshop = document.getElementById("readroot").cloneNode(true);
        clonedWorkshop.id = "";
        clonedWorkshop.className = "";
        clonedWorkshop.querySelector(".remover").onclick = removeWorkshop;
        renameInputs(clonedWorkshop);

        targetInsert = document.getElementById("writeroot");
        targetInsert.parentNode.insertBefore(clonedWorkshop, targetInsert);
    };

    renameInputs = function (container) {
        var children, i, j, cur, theName;
        children = container.children;
        for (i = 0, j = children.length; i < j; i++) {
            cur = children[i];
            if (cur.nodeName.toLowerCase() === "input") {
                theName = cur.name;
                if (theName) {
                    cur.name = theName + counter;
                }
            } else {
                renameInputs(cur);
            }
        }
    };

    removeWorkshop = function () {
        this.parentNode.parentNode.removeChild(this.parentNode);
    };

    window.onload = init;
}());

DEMO： http://jsfiddle.net/gAaxS/

请注意，这是非常特定于结构的 - 例如，this.parentNode.parentNode表示它只有两个您想要定位的祖先。如果您更改了HTML，则必须更改JS（通常情况下）。

使用Javascript复制元素并使用计数器命名

1 个答案: