Question

我有一个嵌套的表单，通过添加更多按钮加载，在嵌套表单中我有单选按钮。根据单选按钮，调用javascript函数来隐藏或显示div。但是对于超过两个或更多形式的单选按钮javascript调用第一个div，因为div id是静态的。请帮助。这里是代码。

form.html.erb

 <%= f.fields_for :book_chapters  do |book| %>
 <%= render '/publications/book_chapter', :ff => book %>
 <% end %>
 <%= f.link_to_add "Add chapter", :book_chapters, :class => "add_category_link"%>

_book_chapter.html.erb

<%= ff.input :chapter_no %>
<%= ff.input :chapter_title %>
<%= ff.input :description %>
<%= ff.input :pdf, :hint => "Please upload Pdf's Only." %>     
<div class="control-group string optional">
  <label class="string optional control-label">Plan</label>
<div class="controls">
<%= ff.radio_button :plan, "free", :class=>"relat__atu relat__atu_no" %> Free
<%= ff.radio_button :plan, "premium", :class=>"relat__atu relat__atu_yes" %>Premium

<script>
  jQuery(".relat__atu").on("change", function(){
    jQuery("#esatu").toggle($(this).hasClass("relat__atu_yes"));
  })
</script>

<div id="esatu" style="display:none">
  <label for="relat_tipus_atu">
    <%= ff.input :credits %>
  </label>
</div>

<div class="controls">
  <%= ff.link_to_remove "remove", :class => "remove_category" %>
</div>

Answer 1

您可以在div内部渲染部分，如

<div class='some_div'>
  <%= render '/publications/book_chapter', :ff => book %>
</div>

将div的id更改为class

<div class="esatu" style="display:none">

将js更改为

jQuery(".some_div").on("change", ".relat__atu", function() {
  jQuery(".esatu", $(this).parent('.some_div')).toggle($(this).hasClass("relat__atu_yes"));
})

Answer 2

我设法通过查看嵌套的表单gem解决了这个问题。内嵌嵌套gem唯一ID是为每次添加动态生成的。解析数据蓝图并用生成的唯一ID替换“new _＃{association}”。在我的情况下，关系就像'publication'has_many'book_chapters'所以我的关联是book_chapters。我为id =“book_chapters”指定了新行，并在添加新行时将其替换为唯一ID。

也许它对其他人有用

嵌套表单中的动态javascript div id

2 个答案: