使用 Cocoon jQuery 回调的嵌套表单隐藏和显示 div答案

【问题标题】：Nested form hide and show div using Cocoon jQuery callbacks使用 Cocoon jQuery 回调的嵌套表单隐藏和显示 div
【发布时间】：2015-04-07 19:07:05
【问题描述】：

我在我的 ruby on rails 4 应用程序中使用 cocoon 来处理我的嵌套表单。在我的一个嵌套表单中，我让用户能够添加多个联系人，如果该联系人在 is_personal_guarantor 字段中标记为“是”，我想显示更多在 div 中的输入。我想确保用户是否以一种嵌套形式触发 div，它不会影响页面上同一对象的其他嵌套形式。

# Form
<div id="business_contact">
    <%= f.fields_for :business_contacts, :wrapper => true do |contact_form| %>
        <%= render 'business_contact_fields', :f => contact_form %>
    <% end %>
    <%= link_to_add_association "Add a contact", f, :business_contacts %>
</div>

# business_contact_fields partial
<div class="nested-fields">        
    <fieldset>
        <div class="row">
            <!-- Input fields -->
            <%= f.select :is_personal_guarantor, options_for_select([["Select", ""], ["Yes", TRUE], ["No", FALSE]], disabled: [""]) %>
        </div>
        <div class="guarantor_details">
            <!-- Input fields -->
        </div>
    </fieldset>
</div>

# jQuery
$(document).ready(function() {
    $('#business_contact')
    .on('cocoon:after-insert', function(e, added_contact) {
       $(".guarantor_details").hide();
       // Logic to be added
    })
});

我知道函数中的 added_contact 参数是我需要使用的，我只是不知道如何在其上运行 if/else 逻辑以显示 guarantor_details div。通过使用cocoon docs，我已经走到了这一步。

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-4 cocoon-gem

【解决方案1】：

我没有测试过，但是你可以试试这样的：

给select 助手上课：

<%= f.select :is_personal_guarantor, options_for_select([["Select", ""], ["Yes", TRUE], ["No", FALSE]], disabled: [""]), class: 'personal-guarantor' %>

在 JS 中：

$('.personal-guarantor').on('select', function() {

  selectedValue = $(this).val();
  guarantorDetails = $(this).closest('.guarantor_details');

  if(selectedValue == TRUE) { guarantorDetails.hide(); } 
  else { guarantorDetails.show(); }

});

【讨论】：