Rails、简单格式和 Javascript show/hide 脚本

Question

我在 Rails 4 应用程序中使用简单的形式。

我有一个项目模型、一个范围模型和一个数据模型。

项目接受范围的嵌套属性。范围接受数据的嵌套属性。

在新项目表单中，我有一个问题要求用户指定他们的项目范围。如果他们检查数据为真（范围内需要），那么我想展示另一组关于数据的问题。

在我的新项目表单中，我有这个问题（范围嵌套）来检查项目范围是否包含数据：

 <%= f.simple_fields_for :scopes do |s| %>
                        <%= s.input :data, :as => :boolean, :label => false, :inline_label => true, { :class => 'toggle_div', target: 'div id="datarequest"'}   %>

            <%= s.input :materials, :as => :boolean, :label => false,  inline_label: 'Equipment or materials' %>

            <% end %>

然后我有一个 div id="datarequest"，我想针对上面的 javascript :data 问题，这样如果检查了数据，那么里面的问题这 div 显示。如果未选中，则它们被隐藏。这些问题的属性在数据 table:

中

<div id="datarequest">
        <div class="headerquestion-project">Data request</div>

        <%= f.simple_fields_for :datum do |d| %>
            <% render %>
            <%= d.input :prim_sec, label: 'What sort of data do you want?', label_html: {class: 'dataspace'}, collection: ["Primary", "Secondary", "Both" ], prompt: "Choose one" %>
            <%= d.input :qual_quant, label: 'Do you need qualitative or quantitative data?', label_html: {class: 'dataspace'}, collection: ["Qualitative", "Quantitative", "Both" ], prompt: "Choose one" %>

        <% end %>
</div

我的 js 咖啡文件夹中有一个名为 form-helper 的文件。它包含：

$ ->
  $(document).on 'change', 'input.toggle_div', ()->
    $($(this).attr('target')).toggle this.checked      

  $(document).on 'change', 'input.toggle_radio', ()->
    reverse = $(this).attr('toggle_reverse')
    if reverse
      toggle_value = ($(this).val() == 'false')
    else
      toggle_value = ($(this).val() == 'true')
    target = $(this).attr('target')
    $(target).toggle toggle_value

谁能看出我在 :data 行中做错了什么？看来我的错误是从那里开始的。

谢谢

Answer 1

您在 target 中的选择器看起来不对。将 div id="datarequest" 更改为 #datarequest。如果还有别的，请post输出的HTML.

作为参考，要根据复选框状态切换 div，您可以非常简单地执行以下操作：

$('.checkbox-class').change(function(e) {
    $($(this).data('toggle-div')).toggle();    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-group">
    <div class="checkbox">
        <label><input type="checkbox" class="checkbox-class" data-toggle-div="#div-id">Toggle #div-id</label>
    </div>
</div>
<div id="div-id" style="display:none">
Lorem ipsum dolor sit amet, justo tamquam vix et, nec ut illum omnesque consequat. Sea ex idque placerat. Has no admodum pericula sapientem. Sit mollis noluisse definitionem ei. Ea illud discere deleniti qui, verear eruditi dissentiunt in pri.    
</div>

Rails、简单格式和 Javascript show/hide 脚本

Rails, Simple Form and Javascript show/hide script

javascript

jquery

ruby-on-rails

simple-form