javascript - 在javascript中添加到具有指定索引的数组

Question

我是 javascript 的新手，我创建了 2 个函数，createInput()，它在调用时创建带有 name 参数的输入框，以及将它们附加到 标记，newTwo()，它使用两个不同的名称调用 createInput() 两次。

我似乎无法为这两个名称元素提供索引并使其在每次调用 newTwo() 时递增。我需要这个，以便我可以成对地跟踪字段值。

function createInput(name) 
{

    var input = document.createElement("input");

    input.setAttribute("type", "text");
    input.setAttribute("name", name);

    var form = document.getElementById("foobar");

    form.appendChild(input);

}

function newTwo()
{
    var $i = 0;
    createInput("first_name[" + $i + "]");
    createInput("last_name[" + $i + "]");
    $i++;
}

当我调用 newTwo() 时，输入字段使用数组索引创建，如下所示。

<input type="text" name="first_name[0]" />
<input type="text" name="last_name[0]" />

如果我再次调用它，接下来的两个字段将是

<input type="text" name="first_name[0]" />
<input type="text" name="last_name[0]" />

我想要的前第二次调用的输出是

<input type="text" name="first_name[1]" />
<input type="text" name="last_name[1]" />

有什么建议吗？提前致谢。

Answer 1

因为函数内部有 var $i = 0;，所以每次运行函数时都会创建一个新变量并将其初始化为 0。如果要使用在函数调用之间保持其值的变量，则需要在函数外部声明它。例如:

var $i = 0;
function newTwo()
{
    createInput("first_name[" + $i + "]");
    createInput("last_name[" + $i + "]");
    $i++;
}

或者，如果您真的想避免使 $i 成为全局的，您可以创建一个 IIFE像这样围绕它:

var newTwo = (function() {
    var $i = 0;
    return function() {
        createInput("first_name[" + $i + "]");
        createInput("last_name[" + $i + "]");
        $i++;
    };
})();

请注意，此版本与之前的版本之间存在细微差别。有关详细信息，请参阅这些问题:

• > How do JavaScript closures work?
• > var functionName = function() {} vs function functionName() {}