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

Question

我有一系列以三个为一组的单选按钮（针对测验的每个步骤）。如果选择的单选按钮是“视频”，我想显示“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>

这是为表单字段之一输出的 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

我只是在change 处理程序的开头将hide 全部三个，然后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/

您也不需要在 change 处理程序中进行额外的 @checked 测试，回调只会为当前选中的单选按钮调用，因此检查 @checked 只会增加不必要的噪音。

---

如果您有多组单选按钮，那么最简单的做法是将单选按钮及其额外的<div>s 包装在一个公共容器中：

<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/