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マジックを使用して作成され、変更するとデータがデータベースに保存されなくなります。

作成される名前は、たとえば「model [：field]」を反映するname ="asset_loss[loss_type]"です。これを使用することもできますが、「」が適切にカプセル化されていないため、Jqueryはこれにつまずきます。

例えば

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

つまり、ブロックは「input [name = "and"]」であり、機能しません。

したがって、最終的な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つをつなぎ合わせて、それをDRYにする方法を知っているなら、コメントを歓迎します。これが、これを行おうとしている人の助けになることを願っています。

于 2012-10-09T07:02:11.993 に答える