0

我想我已经搜索了足够长的时间来保证提出这个问题，我希望我没有遗漏一些明显的东西，但我对此束手无策。我是一个完整的 JavaScript 菜鸟，我很难让我在网上找到的脚本正常工作。

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

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

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

http://pastebin.com/nQhnXXKx

如果我能澄清一下，请告诉我，任何帮助将不胜感激！

4

1 回答 1

0

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

(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;
}());

演示：http: //jsfiddle.net/gAaxS/

请注意，这是非常特定于结构的 - 例如，这this.parentNode.parentNode意味着它恰好具有您要定位的两个祖先。如果您更改了 HTML，则必须更改 JS（这很常见）。

于 2013-07-18T20:40:22.827 回答