1

此代码正在运行，但在 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(); 无需更改监听器

4

2 回答 2

2

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

$j("input[name='btnGroupName']").change(function() {  
 if($('#rb').is(':checked')) { 
    $j("#asset_list").show("slide");
  }else{
    $j("#asset_list").hide();
  }
});
于 2012-10-02T14:42:04.983 回答
0

只是为了整理所有内容，并说明一些问题。这是最终的代码。

我的单选按钮在视图中。

<%= 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() {

意味着块是“输入[名称=”和“]”并且不起作用。

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

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

于 2012-10-09T07:02:11.993 回答