编辑表单时显示/隐藏持久性，其中单选按钮用于显示/隐藏表单元素答案

【问题标题】：Show/Hide persistence when editing form where radio button is used to show/hide forms element编辑表单时显示/隐藏持久性，其中单选按钮用于显示/隐藏表单元素
【发布时间】：2012-10-01 08:06:22
【问题描述】：

这段代码可以运行，但在 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']”（来自 db）然后 $j("#asset_list").show();无需更改监听器

【问题讨论】：

请发布呈现的标记而不是服务器端代码。

标签： jquery ruby-on-rails refactoring

【解决方案1】：

首先，我会给它们起一个相同的名称，以便将它们组合在一起。

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

【讨论】：

【解决方案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

您不能为此使用 :name，单选按钮组名称是使用 Rails 魔术创建的，并且更改这意味着您的数据将不会保存到数据库中。

创建的名称是例如 name="asset_loss[loss_type]"，它反映了“model[:field]”。你可以使用它，但 Jquery 会因为 " " 没有正确封装而出错。

例如

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

表示这些块是“input[name=" 和 "]" 并且不起作用。

所以最终的 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() {

现在，如果有人知道如何将这两者串在一起并使其干燥，欢迎发表评论。希望这可以帮助任何尝试这样做的人。

【讨论】：