Rails、Simple Form 和 Javascript 显示/隐藏脚本答案

【问题标题】：Rails, Simple Form and Javascript show/hide scriptRails、Simple Form 和 Javascript 显示/隐藏脚本
【发布时间】：2015-06-09 05:31:55
【问题描述】：

我在我的 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"，我想在上面的 :data 问题上定位 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 咖啡文件夹中有一个名为 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 行中做错了什么？看来我的错误从那里开始。

谢谢

【问题讨论】：

标签： javascript jquery ruby-on-rails simple-form

【解决方案1】：

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

【讨论】：