javascript - 使用递增 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

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

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