Question

在HTML表单中，我使用jquery / javascript创建动态HTML元素。为动态元素提供不同的ID我正在使用循环迭代变量。我的想法是循环它将自动给出迭代编号作为ID但在HTML中我看到它使用所有元素的第一个迭代数字值。

例如，如果我传递2，则会生成2个具有相同ID的控件。这是为什么？对我来说，JS的这种行为很奇怪。你能指导导致这种情况的原因吗？循环工作的次数是传递给函数的次数，但它没有显示正确的数字作为ID的一部分。

  function CreateDependentForms(noOfControlsToCreats)
    {
        var itrator = 1;
        var sectionFName ="<div id=Dependent"+ itrator +"FName " +"class=\"field rf-field\"><label>First Name</label><input type=\"text\" required=\"\" placeholder=\"eg. Joe\" name=\"partNerfirstname\" aria-required=\"true\"></div>";

        for (;itrator<noOfDependents; itrator++)
        {               
            alert(sectionFName);
            $('#dependentfrequency').after(sectionFName);
        }
}

Answer 1

您创建HTML内容的部分不在您的循环中。在循环中移动var sectionFName的声明将为您的元素生成唯一的ID。

function CreateDependentForms(noOfControlsToCreats) {
    for (var itrator = 1; itrator < noOfDependents; itrator++) {               
        var sectionFName ="<div id=Dependent"+ itrator +"FName " +"class=\"field rf-field\"><label>First Name</label><input type=\"text\" required=\"\" placeholder=\"eg. Joe\" name=\"partNerfirstname\" aria-required=\"true\"></div>";

        $('#dependentfrequency').after(sectionFName);
    }
}

Answer 2

您的字符串是在声明时构建的。在for循环中，您的sectionFName字符串为"<div id=Dependent1 ..."。这是因为你已经宣布了这一点。在你的循环中增加itrator并不是要改变你的字符串。

for (var itrator = 1;itrator<noOfDependents; itrator++)
{
    var sectionFName ="<div id=Dependent"+ itrator +"FName " +"class=\"field rf-field\"><label>First Name</label><input type=\"text\" required=\"\" placeholder=\"eg. Joe\" name=\"partNerfirstname\" aria-required=\"true\"></div>";
    alert(sectionFName);
    $('#dependentfrequency').after(sectionFName);
}

Answer 3

function CreateDependentForms(noOfControlsToCreats)
{
    var itrator = 1;
    var sectionFName ;




    for (;itrator<noOfDependents; itrator++)
    {               
 sectionName = ="<div id=Dependent"+ itrator +"FName " +"class=\"field rf-field\">   <label>First Name</label><input type=\"text\" required=\"\" placeholder=\"eg. Joe\" name=\"partNerfirstname\" aria-required=\"true\"></div>";       
alert(sectionFName);
        $('#dependentfrequency').after(sectionFName);
    }

}

这段代码适合您。因为在你提到的代码中，sectionName被初始化了一次，并且只有一次id被赋予了一次没有改变。因此，您最终只获得了一个ID。

现在执行此行后，您最终会反复使用相同的变量。我曾在PHP，Java和JS工作，我没有看到任何例外。所以对我来说，这是它的工作方式，这是唯一的原因。

希望这会有所帮助。快乐学习：）

Javascript字符串没有得到连接变量值？

3 个答案: