Javascript Coffeescript更改了所有收音机窗体的类，而不是仅更改了一个

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

我的问题是，下面的咖啡脚本有效，只是它改变了所有的广播形式。例如，假设步骤1是video，video 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>

true，类：'icheck stepRadio'>

以下是我希望在相同视图中根据上面的单选按钮显示的选项

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

“宽度：98%；”%>
“宽度：98%；”%>
“宽度：98%；”%>
“宽度：98%；”%>
“宽度：98%；”%>
“宽度：98%；”%>
“宽度：98%；”%>
“宽度：98%；”%>

下面是一个为其中一个表单字段输出的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>

擅长

我只在处理程序的开头列出了所有三个，然后是需要显示的特定处理程序。大概是这样的：

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

然后使用并将内容定位到所讨论的容器：

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

---

演示：

Hi Mu，你发布的代码更干净，但给我留下了同样的问题。例如，如果您要拿起小提琴，在同一类别中再添加两组单选按钮，则任何单选按钮选择的任何更改都将显示所有3组单选按钮的更改类别，而不仅仅是它所更改的类别。也就是说，如果在第1组中选择了“视频”，在第2组中选择了excel-如果将第2组的选择更改为MC，它也会将第1组的显示俯冲更改为MC，尽管它仍然在“视频”上。因此，您有多组单选按钮，每个按钮都有自己的额外

s？

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