Rails 4 - jQuery（最初隐藏，然后切换）与 javascript 冲突答案

【问题标题】：Rails 4 - jQuery (initially hide, then toggle) conflicts with javascriptRails 4 - jQuery（最初隐藏，然后切换）与 javascript 冲突
【发布时间】：2016-04-26 01:29:24
【问题描述】：

我试图弄清楚如何在我的 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

为了尝试解决这些问题的一个方面，我删除了依赖导轨 gem 并尝试编写自己的函数来隐藏我的项目/表单的一部分，直到通过检查来回答该表单中的问题一个盒子（所以它的值为真）。

我的 app/assets/javascripts 文件夹中目前有一个 projects.js 文件。它有：

(function($){

$(document).ready(function() {
    $("#check_project_milestones").hide()
});

})(jQuery);

虽然这个公式（第一行和最后一行是新的）确实阻止了一个错误（在包括第一行和最后一行之前说“未捕获的 TypeError：$ 不是函数（匿名函数）@projects.self-9c019ba...。 js?")，实际上隐藏 id 标签 'check_project_milestones' 中的文本并不起作用。

表格有：

<%= f.input :has_milestones, as: :boolean, boolean_style: :inline, :label => 'Does this research project have identifiable milestones or decision points?', id: 'check_project_milestones' %>

                        <%= content_tag :div,  data: {'checkbox-id': 'check_project_milestones', 'checkbox-value': 'true' } do %>

                            <div class="intpol2">
                              Milestones
                            </div>
                            <%= f.simple_fields_for :milestones do |f| %>

                              <%= render 'milestones/milestone_fields', f: f %>
                            <% end %>
                        <% end %>


                      <div class="row">

                        <div class="col-md-6">

                           <%= link_to_add_association 'Add a milestone', f, :milestones, partial: 'milestones/milestone_fields' %>

                        </div>
                      </div>

我的 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 .

谁能看到我做错了什么？

表格的第二部分

<div id="check_project_milestones" class="hidden">
                                  <div class="intpol2"> Milestones </div>


<div class="nested-fields">
    <div class="container-fluid">
        <div class="form-inputs">

            <div class="row">
                <div class="col-md-7">
                    <div class="form-group string optional project_milestones_title"><label class="string optional control-label" for="project_milestones_attributes_0_title">Give this milestone a title</label><input class="string optional form-control" type="text" name="project[milestones_attributes][0][title]" id="project_milestones_attributes_0_title"></div> 
                </div>

                <div class="col-md-4 col-md-offset-1">
                    <div class="form-group date optional project_milestones_completion_date"><label class="date optional control-label" for="project_milestones_attributes_0_completion_date_1i">When do you expect to reach this milestone?</label><div class="form-inline"><select id="project_milestones_attributes_0_completion_date_1i" name="project[milestones_attributes][0][completion_date(1i)]" class="date optional form-control">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016" selected="selected">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
<select id="project_milestones_attributes_0_completion_date_2i" name="project[milestones_attributes][0][completion_date(2i)]" class="date optional form-control">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4" selected="selected">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="project_milestones_attributes_0_completion_date_3i" name="project[milestones_attributes][0][completion_date(3i)]" class="date optional form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26" selected="selected">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div></div> 
                </div>
            </div>  
            <div class="row">

                <div class="col-md-10">
                    <div class="form-group text optional project_milestones_description"><label class="text optional control-label" for="project_milestones_attributes_0_description">Describe what will be required to complete it</label><textarea class="text optional form-control" name="project[milestones_attributes][0][description]" id="project_milestones_attributes_0_description"></textarea></div> 
                </div>
            </div>
            <div class="row">   
                <div class="col-md-10">
                    <div class="form-group text optional project_milestones_decision"><label class="text optional control-label" for="project_milestones_attributes_0_decision">Will project parties make a decision as to whether to take the project further at this time? If so, what are the relevant considerations?</label><textarea class="text optional form-control" name="project[milestones_attributes][0][decision]" id="project_milestones_attributes_0_decision"></textarea></div> 
                </div>              
            </div>

        </div>
    </div>
</div>  
                               <br>

                               <div class="row">
                                  <div class="col-md-6">
                                     <a class="add_fields" data-association="milestone" data-associations="milestones" data-association-insertion-template="
<div class=&quot;nested-fields&quot;>
    <div class=&quot;container-fluid&quot;>
        <div class=&quot;form-inputs&quot;>

            <div class=&quot;row&quot;>
                <div class=&quot;col-md-7&quot;>
                    <div class=&quot;form-group string optional project_milestones_title&quot;><label class=&quot;string optional control-label&quot; for=&quot;project_milestones_attributes_new_milestones_title&quot;>Give this milestone a title</label><input class=&quot;string optional form-control&quot; type=&quot;text&quot; name=&quot;project[milestones_attributes][new_milestones][title]&quot; id=&quot;project_milestones_attributes_new_milestones_title&quot; /></div> 
                </div>

                <div class=&quot;col-md-4 col-md-offset-1&quot;>
                    <div class=&quot;form-group date optional project_milestones_completion_date&quot;><label class=&quot;date optional control-label&quot; for=&quot;project_milestones_attributes_new_milestones_completion_date_1i&quot;>When do you expect to reach this milestone?</label><div class=&quot;form-inline&quot;><select id=&quot;project_milestones_attributes_new_milestones_completion_date_1i&quot; name=&quot;project[milestones_attributes][new_milestones][completion_date(1i)]&quot; class=&quot;date optional form-control&quot;>
<option value=&quot;2011&quot;>2011</option>
<option value=&quot;2012&quot;>2012</option>
<option value=&quot;2013&quot;>2013</option>
<option value=&quot;2014&quot;>2014</option>
<option value=&quot;2015&quot;>2015</option>
<option value=&quot;2016&quot; selected=&quot;selected&quot;>2016</option>
<option value=&quot;2017&quot;>2017</option>
<option value=&quot;2018&quot;>2018</option>
<option value=&quot;2019&quot;>2019</option>
<option value=&quot;2020&quot;>2020</option>
<option value=&quot;2021&quot;>2021</option>
</select>
<select id=&quot;project_milestones_attributes_new_milestones_completion_date_2i&quot; name=&quot;project[milestones_attributes][new_milestones][completion_date(2i)]&quot; class=&quot;date optional form-control&quot;>
<option value=&quot;1&quot;>January</option>
<option value=&quot;2&quot;>February</option>
<option value=&quot;3&quot;>March</option>
<option value=&quot;4&quot; selected=&quot;selected&quot;>April</option>
<option value=&quot;5&quot;>May</option>
<option value=&quot;6&quot;>June</option>
<option value=&quot;7&quot;>July</option>
<option value=&quot;8&quot;>August</option>
<option value=&quot;9&quot;>September</option>
<option value=&quot;10&quot;>October</option>
<option value=&quot;11&quot;>November</option>
<option value=&quot;12&quot;>December</option>
</select>
<select id=&quot;project_milestones_attributes_new_milestones_completion_date_3i&quot; name=&quot;project[milestones_attributes][new_milestones][completion_date(3i)]&quot; class=&quot;date optional form-control&quot;>
<option value=&quot;1&quot;>1</option>
<option value=&quot;2&quot;>2</option>
<option value=&quot;3&quot;>3</option>
<option value=&quot;4&quot;>4</option>
<option value=&quot;5&quot;>5</option>
<option value=&quot;6&quot;>6</option>
<option value=&quot;7&quot;>7</option>
<option value=&quot;8&quot;>8</option>
<option value=&quot;9&quot;>9</option>
<option value=&quot;10&quot;>10</option>
<option value=&quot;11&quot;>11</option>
<option value=&quot;12&quot;>12</option>
<option value=&quot;13&quot;>13</option>
<option value=&quot;14&quot;>14</option>
<option value=&quot;15&quot;>15</option>
<option value=&quot;16&quot;>16</option>
<option value=&quot;17&quot;>17</option>
<option value=&quot;18&quot;>18</option>
<option value=&quot;19&quot;>19</option>
<option value=&quot;20&quot;>20</option>
<option value=&quot;21&quot;>21</option>
<option value=&quot;22&quot;>22</option>
<option value=&quot;23&quot;>23</option>
<option value=&quot;24&quot;>24</option>
<option value=&quot;25&quot;>25</option>
<option value=&quot;26&quot; selected=&quot;selected&quot;>26</option>
<option value=&quot;27&quot;>27</option>
<option value=&quot;28&quot;>28</option>
<option value=&quot;29&quot;>29</option>
<option value=&quot;30&quot;>30</option>
<option value=&quot;31&quot;>31</option>
</select>
</div></div> 
                </div>
            </div>  
            <div class=&quot;row&quot;>

                <div class=&quot;col-md-10&quot;>
                    <div class=&quot;form-group text optional project_milestones_description&quot;><label class=&quot;text optional control-label&quot; for=&quot;project_milestones_attributes_new_milestones_description&quot;>Describe what will be required to complete it</label><textarea class=&quot;text optional form-control&quot; name=&quot;project[milestones_attributes][new_milestones][description]&quot; id=&quot;project_milestones_attributes_new_milestones_description&quot;>
</textarea></div> 
                </div>
            </div>
            <div class=&quot;row&quot;> 
                <div class=&quot;col-md-10&quot;>
                    <div class=&quot;form-group text optional project_milestones_decision&quot;><label class=&quot;text optional control-label&quot; for=&quot;project_milestones_attributes_new_milestones_decision&quot;>Will project parties make a decision as to whether to take the project further at this time? If so, what are the relevant considerations?</label><textarea class=&quot;text optional form-control&quot; name=&quot;project[milestones_attributes][new_milestones][decision]&quot; id=&quot;project_milestones_attributes_new_milestones_decision&quot;>
</textarea></div> 
                </div>              
            </div>

        </div>
    </div>
</div>  " href="#">Add a milestone</a>

                                  </div>
                               </div>

                            </div>

当前状态 '这个研究项目是否有可识别的里程碑或决策点？', id: 'project_has_milestones_form' %>

                               <div id="check_project_milestones" class="hidden">
                                  <div class="intpol2"> Milestones </div>
                                  <%= f.simple_fields_for :milestones do |f| %>
                                     <%= render 'milestones/milestone_fields', f: f %>
                                  <% end %>
                               <br>

                               <div class="row">
                                  <div class="col-md-6">
                                     <%= link_to_add_association 'Add a milestone', f, :milestones, partial: 'milestones/milestone_fields' %>

                                  </div>
                               </div>

                            </div>

【问题讨论】：

尝试在(function( $ ) {之前插入jQuery.noConflict();
控制台没有报错，但是和上面的问题一样，隐藏功能不起作用
尝试替换为jQuery("#check_project_milestones").hide();
给出与上述尝试相同的结果（没有控制台错误，但隐藏功能不起作用）。
你是怎么发现这个功能不工作的？

标签： javascript jquery ruby-on-rails

【解决方案1】：

我建议你这样做：

<%= f.input :has_milestones, as: :boolean, boolean_style: :inline, :label => 'Does this research project have identifiable milestones or decision points?' %>

   <div class="content hidden">
      <div class="intpol2"> Milestones </div>
      <%= f.simple_fields_for :milestones do |f| %>
         <%= render 'milestones/milestone_fields', f: f %>
      <%- end %>
   </div>

   <div class="row">
      <div class="col-md-6">
         <%= link_to_add_association 'Add a milestone', f, :milestones, partial: 'milestones/milestone_fields' %>
      </div>
   </div>

<%- 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 名称。

【讨论】：

嗨 - 我试过了，表单的第二部分是隐藏的，但是当你勾选第一个复选框时它不会显示
控制台显示这个错误：projects.self-a9d9c53....js?body=1:1 Uncaught TypeError: $ is not a function(anonymous function) @ projects.self-a9d9c53....js? body=1:1 main.self-5888479….js?body=1:316
我不知道如何从代码检查器中复制
你改了哪一点？
我用 jQuery 替换了所有的 "$" - 表单的第二部分开始隐藏，但是当您选中第一个框时它不显示