使用單選按鈕顯示/隱藏表單元素時編輯表單的顯示/隱藏持久性

Question

此代碼正在工作，但必須有更好的方式在Jquery腳本中執行此操作。

這裏是我的單選按鈕

<%= f.radio_button :losstype, "Cash", :id => 'lc' %>Cash 
<%= f.radio_button :losstype, "Asset",:id => 'rb' %>Asset 
<%= f.radio_button :losstype, "Supplies", :id => 'ab' %>Supplies 

而且我的繼承人隱藏位現在。

<% if @assetloss.losstype == "Asset" %> 
<div id="asset_list" style="display: show;"> 
<% else %> 
<div id="asset_list" style="display: none;"> 
<% end > 
A drop down list to be shown 
</div> 

而且Jquery的一部分

$j(document).ready(function(){ 
    $j("input[id='lc']").change(function() { 
    $j("#asset_list").hide(); 
    }); 
$j("input[id='rb']").change(function() { 
    $j("#asset_list").show("slide"); 
}); 
    $j("input[id='ab']").change(function() { 
    $j("#asset_list").hide(); 
}); 
}); 

呈現標記上選中了單選按鈕

<input checked="checked" id="rb" name="asset_loss[loss_type]" type="radio" value="Asset"/> 

雖然它的作品，我敢肯定有一個更好的方式來做到這一點，所以我我想要重構幫助。

很多在此先謝謝

Ed1。我已經意識到這是一個JQuery的問題，並需要它來檢查，如果「input [id ='rb']」被檢查（從數據庫），然後$ j（「＃asset_list」）。不需要更換聽衆

Answer 1

首先，我會給他們所有相同的名稱將它們組合在一起。

$j("input[name='btnGroupName']").change(function() { 
if($('#rb').is(':checked')) { 
    $j("#asset_list").show("slide"); 
    }else{ 
    $j("#asset_list").hide(); 
    } 
}); 

Answer 2

只是爲了收拾一切，並陳述一些陷阱。繼承人最終的代碼。

我的單選按鈕在視圖中。

<%= f.radio_button :loss_type, "cash", :id => 'button_cash',  :class => 'lt'%>Cash 
<%= f.radio_button :loss_type, "asset", :id => 'button_asset', :class => 'lt'%>Asset 
<%= f.radio_button :loss_type, "supplies",:id => 'button_supplies', :class => 'lt'%>Supplies 

你不能使用：名字對於這一點，是使用Rails魔術和改變，這意味着你的數據將不會被保存到數據庫中創建的單選按鈕組的名稱。

創建的名稱是例如name =「asset_loss [loss_type]」，它反映了「model [：field]」。你可以使用這個，但是Jquery會因爲沒有正確封裝的「」而絆倒它。

e.g

$j("input[name="asset_loss[loss_type]"]").change(function() { 

意味着塊是 「輸入[名稱=」 和 「]」 和不工作。

所以最終的jQuery代碼是

$j(document).ready(function(){ 
    $j("input[class='lt']").change(function() { 
    if($j('#button_asset').is(':checked')) { 
     $j("#asset_list").show(); 
    }else if ($j('#button_cash').is(':checked')){ 
     $j("#cash_type").show(); 
    }else if($j('#button_supplies').is(':checked')){ 
     // TODO : Partial for stationery 
    } 
}); 

，這將很好地工作。然而回到持久性的主要問題。這個JQuery代碼只有在發生變化時纔會執行。所以當你回到頁面（或重新加載）時，它不會從數據庫中讀取數據，請檢查該數據的值，並適當地顯示/隱藏字段。

爲了這個，我重複所有jQuery代碼之上，但改變

$j("input[class='lt']").change(function() { 

到

$j("input[class='lt']").each(function() { 

現在，如果有人知道它DRY如何串這兩者結合起來，並歡迎發表評論。 希望這可以幫助任何人試圖做到這一點。