我有一个嵌套表单,通过添加更多按钮加载,在嵌套表单中我有单选按钮。根据单选按钮,调用一个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>