Javascript 无法删除 Ruby on Rails 中的类

Question

目前正在与 Zurb Foundation's Clearing Lightbox plugin 合作并在 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 Assets 管道。

最终更新更改了原来的问题以反射(reflect)我发现的问题。请参阅下面我的回答。

Answer 1

我的问题的解决方案与我所要求的有点不同，但我能够通过修复 Ruby on Rails Assets 管道的 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 文件。

最终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"