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 =＆＃34; datarequest＆＃34;，我想在上面的数据问题上定位javascript，这样如果检查了数据，那么就会显示这个div中的问题。如果未选中，则隐藏它们。这些问题的属性在数据表中：

<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 coffee文件夹中有一个名为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

任何人都可以在数据线中看到我做错了什么吗？似乎我的错误从那里开始。

谢谢

Answer 1

target中的选择器看起来不对。将div id="datarequest"更改为#datarequest。如果还有其他内容，请发布输出的HTML。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Rails，简单表单和Javascript显示/隐藏脚本

1 个答案: