如何使用CoffeeScript和JQuery动态显示/隐藏Rails表单字段？

尝试基于用户选择的值构建提交到多个模型的表单

我以为《196：嵌套模型表单》（Nested Model Form）的Railscast一集会有所帮助，但解决方案并不是我想要的。我创建了多个模型，它们之间有关联（属于，有很多），并包含了接受的嵌套属性声明，以支持表单将生成的对象：

class User < ActiveRecord::Base
  attr_accessible :password_digest, :uname, :user_type, :artist_attributes, :sponsor_attributes
  has_many :artists
  has_many :sponsors
  accepts_nested_attributes_for :artists, :sponsors

  validates :uname, presence: true, uniqueness: true
  has_secure_password
end

class Artist < ActiveRecord::Base
  attr_accessible :user_id, :address, :email, :genre, :name, :phone, :photo, :preferences, :rate, :terms, :artist_type
  belongs_to :user

  validates :email, :genre, :name, :phone, :photo, :preferences, :pwd, :terms, :artist_type, :uname, presence: true
  validates :rate, numericality: {greater_than_or_equal_to: 0}
  validates :phone, numericality: true  
  validates_length_of :phone, :minimum => 10, :message => "Phone numbers need to be at least 10 digits"
  validates :email, uniqueness: true
end

class Sponsor < ActiveRecord::Base
  attr_accessible :user_id, :address, :email, :name, :phone
  has_many :venues
  belongs_to :user

  validates :email, :name, :phone, presence: true
  validates :email, uniqueness: true
  validates :phone, numericality: true
  validates_length_of :phone, :minimum => 10, :message => "Phone numbers need to be at least 10 digits"
end

当我点击单选按钮时，什么也没发生。我认为这可能与

显示有关：每个
中都没有属性，因此我删除了它们，并意识到表单元素的字段根本不显示

用于块的两个字段\u是否可以包含在同一格式中？如何对其进行编码以显示表单元素？我希望赞助商和艺术家表单元素在默认情况下隐藏，但在单击相应的单选按钮时显示

我是RubyonRails、Jquery和Coffeescript的新手，非常感谢您的帮助。仅供参考：我使用Railsinstaller（Ruby版本1.9.3）安装了Rails 3.2.13，并验证是否安装了Coffeescript版本1.6.3。有什么想法吗

更新
在Bartosz

的帮助下追踪到了这个问题（谢谢）。我查看了浏览器中呈现的HTML的源代码，发现jQuery选择器中使用的name属性的值不正确。选择器应将控制器名称包含为

$（'input[name=user\u type]“]）

，而不是

$（'input[name=“user[user\u type]”]）

。我修改了Bartosz的cleaner Coffeescript代码，以使用正确命名的选择器实现所需的显示/隐藏功能：

jQuery ->
    $('input[name="user[user_type]"]').on 'click', (event) ->
        curr = event.target.value.toLowerCase()
        $('[id$=_fields]').hide()
        $('#'+curr+'_fields').show()

---

希望这能帮助其他人像我一样寻找答案…

回调是否被触发

试试这个：

$('input[name=user_type]').change (e) ->
    curr = e.target.value.toLowerCase()
    $('[id$=_fields]').hide()
    $('#'+ curr +'_fields').show()

---

最简单的方法是使用gemcoocon，它实现了您想要的所有东西。不，在“jQuery->”行下的所有内容也应该缩进。我会在原来的帖子中解决这个问题……感谢您推荐的Coffeescript语法，

Bartosz

（更干净了&您教了我一些新的选择器通配符）。我用您建议的代码替换了我的users.js.coffee文件中

jQuery->

行之后的代码，但仍然不起作用。似乎没有触发回调。请尝试使用断点或

console.log（e）

进行调试。检查输入是否存在

console.log$（'input[name=user\u type]'）

。我不明白为什么这不起作用。我直接在\app\views\users\u form.html.erb中添加了一个脚本块，看看这是否会产生影响，但它也不起作用（甚至警报也不起作用）：$（document.ready）（function（）{$（'input[name=user\u type]）。单击（function（）{alert（this.value）；$（'id$='u fields]'）。hide（）$（“#”+this.value.toLowerCase（）+“_fields”）.show（）}}）；对于新手的问题，我很抱歉，但是我应该在咖啡脚本中的

console.log（e）

call？插入到哪里？在

change（e）->

函数块中。但是如果警报显示失败，我想它将不会显示任何内容。检查JS console是否有错误，或者向我们显示repo。

jQuery ->
    $('input[name="user[user_type]"]').on 'click', (event) ->
        curr = event.target.value.toLowerCase()
        $('[id$=_fields]').hide()
        $('#'+curr+'_fields').show()

$('input[name=user_type]').change (e) ->
    curr = e.target.value.toLowerCase()
    $('[id$=_fields]').hide()
    $('#'+ curr +'_fields').show()