以ID递增的自动生成字段为目标（JavaScript）

我有一组带有“添加更多字段”按钮的HTML字段。用户可以根据需要添加任意多组字段

<input id="alpha1" name="alpha1" type="text">
<input id="beta1" name="beta1" type="text" style="display:none;">
<select id="select_box1" name="select_box1">
    <option value="one">one</option>
    <option value="two">two</option>
</select>

beta

字段需要根据用户在选择框中的输入显示/隐藏

$(document).ready(function () {
    toggleFields(); 
    $("#select_box1").change(function () {
        toggleFields();
    });
});
function toggleFields() {
    if ($("#select_box1").val() == "two") {
        $("#alpha1").hide();
        $("#beta1").show();
    }
    else {
        $("#alpha1").show();
        $("#beta1").hide();
    }
}

---

上述代码的工作原理与我的默认id（1）字段集的工作原理相同。但是，我不知道如何定位用户可能添加到此表单的所有（未知数量）附加字段。

将类activeSelect添加到您正在使用的每个选择中。将事件绑定到文档将允许您动态更改DOM，并且事件将绑定到每个添加的元素

$(document).ready(function () {
    toggleFields(1); 
    $(document).on("change", ".activeSelect", function () {
        toggleFields($(this).attr("id").substr(10));
    });
});
function toggleFields(id) {
    if ($("#select_box"+id).val() == "two") {
        $("#alpha"+id).hide();
        $("#beta"+id).show();
    }
    else {
        $("#alpha"+id).show();
        $("#beta"+id).hide();
    }
}

---

将类activeSelect添加到您正在使用的每个select。将事件绑定到文档将允许您动态更改DOM，并且事件将绑定到每个添加的元素

$(document).ready(function () {
    toggleFields(1); 
    $(document).on("change", ".activeSelect", function () {
        toggleFields($(this).attr("id").substr(10));
    });
});
function toggleFields(id) {
    if ($("#select_box"+id).val() == "two") {
        $("#alpha"+id).hide();
        $("#beta"+id).show();
    }
    else {
        $("#alpha"+id).show();
        $("#beta"+id).hide();
    }
}

将类用作字段组的单个标识符，并按如下方式包装组：

<div class="wrapper">
  <input id="alpha1" class="item alpha" name="alpha1" type="text">
  <input id="beta1" class="item beta" name="beta1" type="text" style="display:none;">
  <select id="select_box1" name="select_box1" class="selectClass">
   <option value="one">one</option>
   <option value="two">two</option>
  </select>
</div>

将类用作字段组的单个标识符，并按如下方式包装组：

<div class="wrapper">
  <input id="alpha1" class="item alpha" name="alpha1" type="text">
  <input id="beta1" class="item beta" name="beta1" type="text" style="display:none;">
  <select id="select_box1" name="select_box1" class="selectClass">
   <option value="one">one</option>
   <option value="two">two</option>
  </select>
</div>

---

使用类附加元素，并使用类而不是元素id。每组字段都有一个select、主输入和辅助输入。选择框必须仅控制与其自身集合关联的主/辅切换。使用类附加元素，并使用类而不是元素id。每组字段都有一个选择、主输入和辅助输入。选择框必须仅控制与其自己的集合关联的主/辅切换。您可以避免使用ID，您可以使用parent、close、find jQuery方法您可以避免使用ID，您可以使用parent、close、find jQuery方法