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']”（来自db）然后检查$ j（“＃asset_list”）。show（）;无需更改监听器

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会因此而绊倒。

例如

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

现在，如果有人知道如何将这两者串在一起并使其变干，欢迎发表评论。希望这有助于任何人试图这样做。

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

2 个答案: