Rails，簡單的窗體和Javascript顯示/隱藏腳本

即時通訊使用簡單的形式與我的Rails 4應用程序。Rails，簡單的窗體和Javascript顯示/隱藏腳本

我有一個項目模型，範圍模型和數據模型。

項目接受範圍的嵌套屬性。範圍接受數據的嵌套屬性。

在新的項目形式中，我有一個問題要求用戶指定他們的項目範圍。如果他們檢查數據爲真（在範圍內是必需的），那麼我想顯示另一組關於數據的問題。

在我的新項目，形成我有這個問題（嵌套的作用域）檢查項目範圍是否包括數據：

<%= 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：數據問題，以便如果數據被檢查，然後顯示這個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文件夾的咖啡。它包含：

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

任何人都可以看到我在數據行中做錯了什麼？看來我的錯誤從那裏開始。

謝謝

來源

2015-04-04 Mel

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

來源

2015-04-04 09:31:54 Tomanow

Rails，簡單的窗體和Javascript顯示/隱藏腳本

回答

相關問題