使用递增ID定位自动生成的字段（JavaScript）

Question

我有一组带有“添加更多字段”按钮的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>

“添加更多”选项触发JS创建一组新字段，并将id和name增加一个。 代码简化了，但是如果需要，我可以发布所有代码。

// [...]
next = next + 1;
// [...]
var fieldtype_1 = '<input id="alpha' + next + '" name="alpha' + next + '">'
var fieldtype_2 = '<input id="beta' + next + '" name="beta' + next + '" style="display:none;">'
var select_options = `
            <option value="one">one</option>
            <option value="two">two</option>
    `
var fieldtype_3 = '<select id="select_box' + next + '">' + select_options + '</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）字段集。 但是，我不知道如何针对用户可能会添加到此表单的所有（未知数量）附加字段。

Answer 1

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

Answer 2

jsFiddle使用类作为字段组的单个标识符，并像这样包装该组：

<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>

然后在所选部分中切换所需类的所有元素：

$('.selectClass').on('change', function(){
   var classToShow = $(this).val() == "two" ? "beta" : "alpha";
   $(this).closest('.wrapper').find('.item').hide();
   $(this).closest('.wrapper').find('.' + classToShow).show();
});