Rails 4 – jQuery（最初隐藏，然后切换）与javascript冲突
我正试图弄清楚如何在我的rails 4应用程序中加入jQuery和javascript。 我正在挣扎。
我在我的gem文件中有这些gem：
gem 'sass-rails', '~> 5.0' gem 'bootstrap-sass', '~> 3.3.5.1' gem 'jquery-rails' gem 'jquery-ui-rails' 我有很多冲突（我的最后5个问题和最近的赏金都与这些有关）。 见附件链接：
http://stackoverflow.com/questions/36734854/rails-4-jquery-conflicts-with-javascript http://stackoverflow.com/questions/36832276/rails-4-jquery-conflicts-and-function-error http://stackoverflow.com/questions/36831987/rails-4-jquery-to-hide-initially-then-toggle-with-click http://stackoverflow.com/questions/36614651/rails-4-conditional-js-with-dependent-fields-rails
为了尝试解决这些问题的一个方面，我删除了依赖rails gem并尝试编写自己的函数来隐藏我的项目/表单的一部分，直到通过选中一个框来回答该表单中的问题（所以它的价值是真的）。
我目前在app / assets / javascripts文件夹中有一个projects.js文件。 它有：
(function($){ $(document).ready(function() { $("#check_project_milestones").hide() }); })(jQuery);
虽然这个公式（第一行和最后一行是新的）确实停止了一个错误（在包括第一行和最后一行之前说“Uncaught TypeError：$不是函数（匿名函数）@ projects.self-9c019ba … .js？” ），它实际上不会隐藏id标签’check_project_milestones’中的文本。
表格有：
'Does this research project have identifiable milestones or decision points?', id: 'check_project_milestones' %> Milestones
我的application.js有：
//= require jquery //= require jquery-ui //= require bootstrap-sprockets //= require jquery_ujs //= require html.sortable //= require disqus_rails //= require moment //= require bootstrap-datetimepicker //= require pickers //= require main //= require hammer.min //= require jquery.animate-enhanced.min //= require jquery.countTo //= require jquery.easing.1.3 //= require jquery.fitvids //= require jquery.magnific-popup.min //= require jquery.parallax-1.1.3 //= require jquery.properload //= require jquery.shuffle.modernizr.min //= require jquery.sudoSlider.min //= require jquery.superslides.min //= require masonry.pkgd.min //= require rotaterator //= require smoothscrolljs //= require waypoints.min //= require wow.min //= require gmaps/google //= require chosen-jquery //= require cocoon //= require imagesloaded.pkgd.min //= require isotope.pkgd.min //= require jquery.counterup.min //= require jquery.pjax //= require custom.js //= require slider //= require underscore //= require bootstrap-slider //= require_tree .
谁能看到我做错了什么？
表格的第二部分
Milestones 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 January February March April May June July August September October November December 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<a class="add_fields" data-association="milestone" data-associations="milestones" data-association-insertion-template=" 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 January February March April May June July August September October November December 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 " href="#">Add a milestone
FORM的当前状态 ‘此研究项目是否具有可识别的里程碑或决策点？’，id：’project_has_milestones_form’％>
Milestones
我建议你这样做：
<%= f.input :has_milestones, as: :boolean, boolean_style: :inline, :label => 'Does this research project have identifiable milestones or decision points?' %> <%= link_to_add_association 'Add a milestone', f, :milestones, partial: 'milestones/milestone_fields' %> <%- end %>
将表单定义为带有id的复选框，并使用另一个 id定义表单的其余部分。 然后在复选框上定义单击手柄，只需在其余的表单div切换添加/删除hidden类部件。
$(document).ready(function() { $("#project_has_milestones").on('click', function() { if ($(this)[0].checked) { $('#project_has_milestones .content').addClass('hidden'); } else { $('#project_has_milestones .content').removeClass('hidden'); } }); });
如果jQuery名称冲突，你应该用jQuery名称替换所有$ 。