Question

我的问题与this几乎相似。只是略有不同。

我有两个模型 - 家人和人，has_many来自家人，accepts_nested_attributes_for :persons来自family.rb

在我的 FamiliesController 中，我有edit方法来编辑记录。我使用嵌套表单作为一个家庭和相应的人。（所以一个家庭可以有很多人）

在我的 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适用于第一个人而不是第二个人

如何解决此问题？

我在某处阅读迭代javascript（有些人甚至说下划线.js）。

或建议任何其他方法来执行此操作

Answer 1

这是因为您使用id来获取DOM元素。页面应该具有唯一的ID，因此jQuery匹配它找到的第一个元素。您需要使用class。将html和函数更改为sthing（代码未经过测试，请注意）：

<%= 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))
    })

 })();

从以前选择的字段动态更改表单字段，迭代javascript

1 个答案: