Targeting automatisch generierte Felder mit inkrementierten IDs (JavaScript)

Question

Ich habe eine Startmenge von HTML-Feldern mit einer Schaltfläche Weitere Felder hinzufügen. Der Benutzer kann beliebig viele Sätze von Feldern hinzufügen.

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

Die Mehr Option hinzufügen löst JS einen neuen Satz von Feldern creatate und erhöht den id und name um eins. Code ausgeführt, um zu rationalisieren, aber ich kann alle auf Anfrage veröffentlichen.

// [...] 
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>' 

Das beta Feld muss/auszublenden auf Benutzereingaben in ein Auswahlfeld basierend zeigen.

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

Der obige Code funktioniert wie vorgesehen für meine Standard-ID (1) Satz von Feldern. Ich weiß jedoch nicht, wie man sich an alle (unbekannte) Anzahl von zusätzlichen Feldern richtet, die der Benutzer möglicherweise zu diesem Formular hinzufügen könnte.

Answer 1

Fügen Sie die Klasse activeSelect zu jeder Auswahl hinzu, die Sie verwenden. Um das Event in Dokument Bindung ermöglicht es Ihnen, das DOM und das Ereignis werden jedes hinzugefügte Element binded werden

$(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 Gebrauchsklasse als einzige Kennung für Felder Gruppe und wickeln Sie die Gruppe wie diese dynamisch zu ändern:

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

Dann schalten alle Elemente der gewünschten Klasse in ausgewählten Abschnitt:

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