Question

我有三个一组的单选按钮（对于测验的每一步）。如果选择的单选按钮是“视频”，我想显示“videoCreator”div。如果它是“excel”，“excelCreator”div等，这些div只是单选按钮下方的其他表单项，以允许用户输入更多信息。

我的问题是下面的coffeescript有效，除了它改变了所有的无线电形式。例如，假设第1步是视频，视频div显示。如果我将步骤2更改为excel单选按钮，excel div将显示所有步骤（无线电表单），包括第一个应该保留视频的步骤。我想我需要创建一个可变的，但我不确定。任何帮助将不胜感激。

Coffeescript

$(".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>

这是一个为其中一个表单字段

输出的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>

Answer 1

我只需要hide 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和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/

Coffeescript更改所有无线电表单的类，而不是仅更改已更改的表

1 个答案: