0

一連のラジオ ボタンを 3 つのグループに分けています (クイズの各ステップに対して)。選択したラジオ ボタンが「ビデオ」の場合、「videoCreator」div を表示したいと思います。「excel」の場合は、「excelCreator」div などです。これらの div は、ラジオ ボタンの下にある追加のフォーム項目であり、ユーザーがより多くの情報を入力できるようにします。

私の問題は、すべての無線フォームを変更することを除いて、以下のコーヒースクリプトが機能することです。たとえば、ステップ 1 がビデオで、ビデオ div が表示されているとします。ステップ 2 を Excel のラジオ ボタンに変更すると、最初のステップを含むすべてのステップ (ラジオ フォーム) に対して Excel の div が表示されます。変数を作成する必要があると思いますが、よくわかりません。どんな助けでも大歓迎です。

コーヒースクリプト

$(".excelCreator").hide()
$(".videoCreator").hide()
$(".mcCreator").hide()
$(".stepRadio").change ->
  if @value is "video" and @checked
    $(".videoCreator").show()
  else if @value is "excel" and @checked
    $(".excelCreator").show()
  else if @value is "multiple_choice" and @checked
    $(".mcCreator").show()
  else
    $(".excelCreator").hide()
    $(".videoCreator").hide()
    $(".mcCreator").hide()

ラジオボタン付きのショーテンプレートは次のとおりです

 <div>
    <div>
      <%= f.label :media_type, "Excel" %>
      <%= f.radio_button :media_type, 'excel', :checked => true, class: 'icheck stepRadio' %>
    </div>
    <div>
      <%= f.label :media_type, "Video" %>
      <%= f.radio_button :media_type, 'video', class: 'icheck stepRadio' %>
    </div>
    <div>
      <%= f.label :media_type, "Multiple Choice" %>
      <%= f.radio_button :media_type, 'multiple_choice', class: 'icheck stepRadio' %>
    </div>
</div>

同じビューの上記のラジオボタンに基づいて表示したいオプションは次のとおりです

<div class="excelCreator">
    <%= f.label :link, "Excel Link" %>
    <%= f.text_field :link, :style => "width: 98%;" %>
    <%= f.label :answer, "Excel Answer (#)" %>
    <%= f.text_field :answer, :style => "width: 98%;" %>
</div>

<div class="videoCreator">
    <%= f.label :link, "Video Link" %>
    <%= f.text_field :link, :style => "width: 98%;" %>
</div>

<div class="mcCreator">
    <%= f.label :choice_one, "Choice One" %>
    <%= f.text_field :choice_one, :style => "width: 98%;" %>
    <%= f.label :choice_two, "Choice Two" %>
    <%= f.text_field :choice_two, :style => "width: 98%;" %>
    <%= f.label :choice_three, "Choice Three" %>
    <%= f.text_field :choice_three, :style => "width: 98%;" %>
    <%= f.label :choice_four, "Choice Four" %>
    <%= f.text_field :choice_four, :style => "width: 98%;" %>
    <%= f.label :answer, "MC Answer (#)" %>
    <%= f.text_field :answer, :style => "width: 98%;" %>
</div>

フォーム フィールドの 1 つに出力される html の例を次に示します。

 <div>
      <label for="course_levels_attributes_0_steps_attributes_0_media_type">Excel</label>
      <input checked="checked" class="icheck stepRadio" id="course_levels_attributes_0_steps_attributes_0_media_type_excel" name="course[levels_attributes][0][steps_attributes][0][media_type]" type="radio" value="excel" />
    </div>
4

1 に答える 1

1

hideハンドラーの先頭に 3 つすべてを配置してから、表示する必要のある特定のchangeハンドラーを配置しました。showこのようなもの：

$(".stepRadio").change ->
  # Hide all the extra `<div>`s
  $(".excelCreator, .videoCreator, .mcCreator").hide()

  # Show the one that we care about.
  if @value is "video"
    $(".videoCreator").show()
  else if @value is "excel"
    $(".excelCreator").show()
  else if @value is "multiple_choice"
    $(".mcCreator").show()

# This initializes things. Since you have `:checked => true`
# on the first radio button, `:checked` will always match one
# radio button.
$('.stepRadio:checked').change()

デモ: http://jsfiddle.net/ambiguous/GVX2Z/

@checkedハンドラーで追加のテストも必要ありませんchange。コールバックは現在チェックされているラジオ ボタンに対してのみ呼び出されるため、チェックする@checkedと不要なノイズが追加されるだけです。

ラジオ ボタンのセットが複数ある場合、最も簡単な方法は、ラジオ ボタンとそのエクストラ<div>を共通のコンテナーにラップすることです。

<div class="container">
    <!-- radio buttons -->
    <!-- extra divs -->
</div>

closest次にandを使用しfindて、問題のコンテナだけにローカライズします。

$(".stepRadio").change ->
  $container = $(@).closest('.container')
  $container.find(".excelCreator, .videoCreator, .mcCreator").hide()
  if @value is "video"
    $container.find(".videoCreator").show()
  else if @value is "excel"
    $container.find(".excelCreator").show()
  else if @value is "multiple_choice"
    $container.find(".mcCreator").show()

デモ: http://jsfiddle.net/ambiguous/2XAP2/

于 2013-09-07T01:04:06.297 に答える