使用遞增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();
});