Javascript无法删除Ruby on Rails中的类

Question

当前正在与Zurb Foundation的Clearing Lightbox插件一起使用block-grid在ul元素上使用block-grid类。 尝试从.carousel > ul删除small-block-grid-2和medium-block-grid-3类

HTML生成

<div id="gallery">
        <div class="row">
            <div class="small-12 columns">
                <div class="clearing-assembled">
                    <div class="">
                        <a class="clearing-close" href="#">×</a>

                        <div class="visible-img" style="display: none;">
                            <img src="/assets/home/our-customers/customer1.jpg"
                            style=
                            "visibility: visible; margin-left: -150px; margin-top: -100.5px;">

                            <p class="clearing-caption" style="display: none;">
                            </p><a class="clearing-main-prev disabled" href=
                            "#"></a><a class="clearing-main-next" href="#"></a>
                        </div>

                        <div class="carousel">
                            <ul class=
                            "small-block-grid-2 medium-block-grid-3 clearing-thumbs"
                            data-clearing="" style="">
                                <li class="visible"><a href=
                                "/assets/home/our-customers/customer1.jpg"><img alt="Customer1"
                                src=
                                "/assets/home/our-customers/customer1.jpg"></a></li>

                                <li><a href=
                                "/assets/home/our-customers/customer1.jpg"><img alt="Customer1"
                                src=
                                "/assets/home/our-customers/customer1.jpg"></a></li>

                                <li><a href=
                                "/assets/home/our-customers/customer1.jpg"><img alt="Customer1"
                                src=
                                "/assets/home/our-customers/customer1.jpg"></a></li>

                                <li><a href=
                                "/assets/home/our-customers/customer1.jpg"><img alt="Customer1"
                                src=
                                "/assets/home/our-customers/customer1.jpg"></a></li>

                                <li><a href=
                                "/assets/home/our-customers/customer1.jpg"><img alt="Customer1"
                                src=
                                "/assets/home/our-customers/customer1.jpg"></a></li>

                                <li><a href=
                                "/assets/home/our-customers/customer1.jpg"><img alt="Customer1"
                                src=
                                "/assets/home/our-customers/customer1.jpg"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CoffeeScript的

display = $(".carousel").siblings(".visible-img").css("display")                                                             
unless display  == "none"                                                                                                    
    $("#gallery .carousel > ul").removeClass("small-block-grid-2 medium-block-grid-3")    

我认为问题在于条件传递。 单击图像后， display: none样式更改为display: block或style=

更新

我只是尝试仅加载('.carousel > ul').removeClass('small-block-grid-2'); ，但不会加载。 我认为问题在于实际的javascript文件正在加载以及Rails资产管道。

最终更新更改了原始问题，以反映我发现的问题。 请参阅下面的答案。

Answer 1

我的问题的解决方案与我所要求的略有不同，但是我能够通过修复Ruby on Rails资产管道的javascript加载顺序来解决此问题。

在 application.js 之前

//= require jquery                                                                                                           
//= require jquery_ujs                                                                                                       
//= require placeholder                                                                                                      
//= require foundation                                                                                                       
//= require turbolinks                                                                                                       
//= require_tree .

在 application.js 之后

//= require jquery                                                                                                           
//= require jquery_ujs                                                                                                       
//= require placeholder                                                                                                      
//= require foundation                                                                                                       
//= require turbolinks                                                                                                       
//= require_self                                                                                                             
//= require_tree .

区别是//= require_self 。 这是按照我希望加载javascript文件的顺序要求application.js的内容//= require_self之后，我添加了//= require_tree . 包括我在同一目录中的所有其他javascript文件。

问题是我在加载application.js之前先加载了一个特定的javascript文件。

Final cars.js.coffee

$(document).ready ->                                                                                                         
  $("#gallery .carousel > ul a").click ->                                                                                    
    $("#gallery .carousel > ul").removeClass "small-block-grid-2 medium-block-grid-3"                                        

  $("#gallery .clearing-close").click ->                                                                                     
    $("#gallery .carousel > ul").addClass "small-block-grid-2 medium-block-grid-3"