使用单选按钮显示/隐藏表单元素时编辑表单的显示/隐藏持久性

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如何串这两者结合起来，并欢迎发表评论。 希望这可以帮助任何人试图做到这一点。