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>

咖啡脚本

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。这样做需要application.js 的内容按照我希望加载javascript 文件的顺序。在//= 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"