Question

这是对以下问题的跟进问题，主要是因为我尝试使用其中的一些解决方案而无法解决问题：

Change only the image inside same div when option from dropdown is chosen

给定一个有很多问题的表单，你可以选择将问题设置为多项选择并添加答案，我有以下问题视图（field_answers方法只是渲染部分）：

.nested-fields
  = f.input :question
  = f.input :type
  #answers{:style => "display:none;"}
    = f.simple_fields_for :answers do |m|
      = field_answers(m)
    %div{:class => "#links"}
      = link_to_add_association '+', f, :answers, :partial => 'layouts/form/answers', :class => 'link-add-field'
  = link_to_remove_association "remove question", f

以下是答案：

.fields.answers-nested-fields
  #answer-field
    = f.input :answer
    = link_to_remove_association "-", f, { wrapper_class: 'answer-nested-fields',  :class => 'link-add-field remove_nested_fields' }

我的questions.js.coffee有以下回调：

$('#type').change ->
  if $(this).val() is "text"
    $("#answers").hide()
  else
    $("#answers").show()

$(document).ready ->
  $('#questions').on("cocoon:before-insert", (e, question_to_be_added) ->
    question_to_be_added.fadeIn "slow"
  ).on("cocoon:after-insert", (e, added_question) ->
    added_question.css "background", "red"
  ).on "cocoon:before-remove", (e, question) ->
    # allow some time for the animation to complete
    $(this).data "remove-timeout", 5000
    question.fadeOut "slow"

第一点是可以显示或隐藏第一个问题的答案，显然它不适用于新添加的问题，因为我想我需要使用前/后插入回调来创建当问题类型更改为＆＃34; text＆＃34;以外的任何内容时，会触发在答案字段上显示/隐藏的事件，那么如何在问题的类型属性上观察更改事件？

Answer 1

想出一个解决方案，它实际上是一个jQuery问题，我只需要使用.find（）

$(document).ready ->
  $('#questions')
  ).on("cocoon:after-insert", (e, added_question) ->
    added_question.find('#type').change ->
      if $(this).val() is "text"
        added_question.find("#answers").hide()
      else
        added_pergunta.find("#answers").show()
  )

在新添加的字段上显示/隐藏嵌套字段

1 个答案: