1

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

我有两个模型——Family和 Person，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。（这里） 

    $(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 适用于第 1 个人而不适用于第 2 个人

我该如何解决这个问题？

我在某处读到使用迭代 javascript（有些人甚至说 underscore.js）。

或建议任何替代方法来做到这一点

4

1 回答 1

1

这是因为您正在使用id获取 DOM 元素。一个页面应该有唯一的 id，所以 jQuery 匹配它找到的第一个具有该 id 的元素。你需要使用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))
    })

 })();
于 2013-09-24T10:45:25.380 回答