Динамически изменяющиеся поля формы из ранее выбранных полей, итеративный javascript

Question

Мой вопрос почти аналогичен this. Просто небольшая разница.

У меня есть две модели- семьи и лица с has_many от семьи к человеку и accepts_nested_attributes_for :persons в family.rb

В моей FamiliesController У меня есть edit метод для редактирования records.There я использую вложенные формы для семьи и соответствующих лиц. (Таким образом, одна семья может иметь много людей)

В моей edit.html.erb У меня есть форма, как:

<%= simple_form_for @family do |f| %> 
    #family fields here 
    <%= f.simple_fields_for :persons do |p| %> 
    <%= p.input :gender,as: :radio_buttons,collection: ["Male","Female"],wrapper_html: {id: "gender"} %> 
    <%= p.input :question,wrapper_html: {id: "question"} %> 
    <% end %> 
    <%= f.submit "Submit" %> 
<% end %> 

(Подобный вопрос, как в ссылке)

И я применил тот же javascript, что и в ответе. (here)

$(function(){ 
    var toggle_gender = function(visible) { 
     if (visible){ 
      $("#question").show(); 
     } else { 
      $("#question").hide(); 
     } 
    } 

    $("#gender input").change(function(){ 
     toggle_gender($(this).val()=="Male") 
    }) 

    toggle_gender($("#gender input:checked").val()=="Male") 
})(); 

Сгенерированный HTML:

<div class="control-group radio_buttons required family_persons_gender gender"> 
<label class="radio_buttons required control-label"> 
    <abbr title="required">*</abbr> 
    Gender 
</label> 
<div class="controls"> 
    <label class="radio"> 
    <input id="family_persons_attributes_1_gender_male" class="radio_buttons required" type="radio" value="Male" name="family[persons_attributes][1][gender]" checked="checked"> 
Male 
    </label> 
    <label class="radio"> 
    <input id="family_persons_attributes_1_gender_female" class="radio_buttons required" type="radio" value="Female" name="family[persons_attributes][1][gender]"> 
Female 
    </label> 
</div> 
</div> 

<div class="control-group string required family_persons_mobnum mobnum"> 
<label class="string required control-label" for="family_persons_attributes_1_mobnum"> 
    <abbr title="required">*</abbr> 
    Mobile No. 
</label> 
<div class="controls"> 
    <input id="family_persons_attributes_1_mobnum" class="string required" type="text" value="9099067758" size="50" name="family[persons_attributes][1][mobnum]"> 
</div> 
</div> 

Но это работает только для первого лица. Значение Если у меня есть 1 семья и 3 человека, javascript работает только для первого человека. Почему так?

Значение Если есть 2 человека, и я изменить пол в 2-го лица в JavaScript работает на первом человеке, а не на 2 человека

Как исправить эту проблему?

Я прочитал где-нибудь использовать итеративный javascript (некоторые даже говорят, что underscore.js).

Или предложить какой-либо альтернативный способ сделать это

Answer 1

Это потому, что используют id, чтобы получить элементы DOM. Предполагается, что на странице должны быть уникальные идентификаторы, поэтому jQuery соответствует первому элементу, который он находит с этим идентификатором. Вам нужно использовать class. Измените html и функции на такое, как это (код не проверен, так что будьте осторожны):

<%= simple_form_for @family do |f| %> 
    #family fields here 
    <%= f.simple_fields_for :persons do |p| %> 
    <%= p.input :gender,as: :radio_buttons,collection: ["Male","Female"],wrapper_html: {class: "gender"} %> 
    <%= p.input :question,wrapper_html: {class: "question"} %> 
    <% end %> 
    <%= f.submit "Submit" %> 
<% end %> 


    $(function(){ 
    var toggle_gender = function(elem) { 
     elem.closest(".gender").siblings('.question').toggle(elem.val() =="Male"); 

    } 

    $(".gender input").change(function(){ 
     toggle_gender($(this)) 
    }) 

    $(".gender input:checked").each(function(){ 
     toggle_gender($(this)) 
    }) 

})();