Question

编辑：我使用了Leo答案并对其进行了一点编辑，在下面更新了代码

我的课程模型有很多部分。区隔是视频或测验，测验有很多问题。我有包含下拉列表的表单，该下拉列表包含视频或测验的命名类型。我希望当我选择“视频”时，立即显示另一个字段，而当我选择“测验”时，将显示其他字段。我写了我想要得到的东西以及表单如何工作，但是我只是不知道活跃的管理员如何与JQuery一起工作，或者我需要编写什么JQuery才能使它工作（以及在哪里写）。

这是我的表单（已更新）：

form do |f|
  tabs do
    tab 'Basic Info' do
      f.inputs "Course details" do
        f.input :title
        f.input :author
      end
    end

    tab 'Content' do
      f.inputs "Segments" do
        f.has_many :segments, heading: false, allow_destroy: true do |s|
          s.input :unit_id
          s.input :unit_title
          s.input :name
          s.input :type, as: :select, collection: Segment.type?, class: 'select-type'

          # I want that if Video selected than it'll open string field
          s.inputs 'video', class: 'video-tab', style: "display: #{s.object.type == 'Video' ? 'block' : 'none'}" do
              s.input :data, :as => :string
          end

          # I want that if Quiz selected than it'll open options for questions and answers
          s.inputs 'quiz', class: 'quiz-tab', style: "display: #{s.object.type == 'Quiz' ? 'block' : 'none'}" do
            s.has_many :questions, heading:"Question", allow_destroy: true do |q|
              q.input :question
              q.input :answer1
              q.input :answer2
              q.input :answer3
              q.input :answer4
              q.input :correct
            end
          end
        end
      end
    end
  end
    f.actions
end

active_admin.js（感谢Leo的帮助）

//= require active_admin/base
$(document).ready(function(){
  $('.select-type').change(function(){
    if ($(this).val() == 'Video') {
      $('.video-tab').css('display', 'block');
      $('.quize-tab').css('display', 'none');
    }
    else {
      $('.video-tab').css('display', 'none');
      $('.quize-tab').css('display', 'block');
    }
  })
})

预先感谢

编辑：我也将添加模型：

课程模型

class Course < ApplicationRecord
  validates :title ,presence: true
  validates :author ,presence: true

  has_many :subscriptions
  has_many :users, :through => :subscriptions

  has_many :segments, inverse_of: :course, :dependent => :destroy, :autosave => true
  accepts_nested_attributes_for :segments, :allow_destroy => true

end

细分模型

class Segment < ApplicationRecord
  validates :course_id ,presence: true
  validates :name ,presence: true
  validates :type ,presence: true
  validates :data ,presence: true

  belongs_to :course, inverse_of: :segments
  has_many :completed_segments
  validates_presence_of :course

  def self.type
    descendants.map{ |t| t.to_s }.sort
  end

  def self.type?
    return self.type
  end

end

视频模型

class Video < Segment
  validates :name ,presence: true

  belongs_to :course

end

测验模型

class Quiz < Segment
  validates :name ,presence: true

  has_many :questions
  belongs_to :course
  validates_presence_of :quiz
  accepts_nested_attributes_for :questions, :allow_destroy => true

end

问题模型

class Question < ApplicationRecord
  validates :question ,presence: true
  validates :answer1 ,presence: true
  validates :answer2 ,presence: true
  validates :answer3 ,presence: true
  validates :answer4 ,presence: true
  validates :correct ,presence: true

  belongs_to :quiz

end

选择下拉列表后，Rails 5 Active Admin使用JQuery显示/隐藏表单中的字段

0 个答案: