5

我对 RoR 和 jQuery 相当陌生。目前，我有一个可用的 RoR 站点作为学习平台。我想包含一些 jQuery 基本功能来扩展我的学习（.mouseenter()、.hover()、.fadeIn() 等）。

让我用一些代码来设置场景（我已经剪掉了一些部分以保持简短）：

$ ruby -v
ruby 1.8.7 (2011-06-30 patchlevel 352) [i686-linux]
$ rails -v
Rails 3.2.8

宝石文件：

gem 'jquery-rails'

配置/路由.rb：

root to: 'static_pages#home'

应用程序/控制器/static_pages_controller.rb：

def home
    @Presents = Present.all.reverse.take(20)
end

应用程序/视图/布局/application.html.erb：

<!DOCTYPE html>
    <html>
        <head>
            <title>List</title>
            <%= stylesheet_link_tag    "application", :media => "all" %>
            <%= javascript_include_tag "application" %>
            <%= csrf_meta_tags %>
            <%= render 'layouts/shim' %>
        </head>
        <body>
            <div class="container-narrow">
                <%= render 'layouts/header' %>
                <%= yield %>
            </div>
        </body>
    </html>

应用程序/资产/javascripts/application.js：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

应用程序/views/static_pages/home.html.erb：

<div class="jumbotron">
    <h1>Heading</h1>
</div>
<%= render 'shared/list' %>

应用程序/视图/共享/_list.html.erb：

<% if @Presents.any? %>
    <%= render partial: 'shared/list_item', collection: @Presents %>
<% end %>

应用程序/视图/共享/_list_item.html.erb：

<div id="present">
    <ul id="<%= list_item.id %>">
        <span class="content">
            Some content here
        </span>
</div>

理想情况下，我希望我的 jQuery 能够影响<div>with id="present"。这是我的测试 jQuery：

$(document).ready(function(){
    $('#present').mouseenter(function(){
        $(this).fadeIn('fast',1);
    }
    $('#present').mouseleave(function(){
        $(this).fadeIn('fast',0.5);
    }
});

目前，我已经存储了上述app/views/static_pages/home.js.erb内容，没有任何反应。这是一个合适的位置吗？或者我应该把它转移到app/views/shared/目录？

从我呈现的网站页面 - 有没有办法检查我的 jQuery 是否被包含和执行？我觉得我当前的阻塞点是我 home.js.erb 的位置。

编辑：在我的 jQuery 中检测到错误 - 更正如下：

jQuery：

$(document).ready(function(){
    $('#present').mouseenter(function(){
        $(this).fadeTo('fast',1);
    });
    $('#present').mouseleave(function(){
        $(this).fadeTo('fast',0.5);
    });
});

并正确使用fadeTo. fadeIn正如我尝试的那样，不接受关于不透明度的第二个论点。

4

1 回答 1

8

您应该在app/assets/javascripts/与视图关联的控制器之后的名称中创建一个文件，例如对于名为home它的控制器：app/assets/javascripts/home.js然后在您的application.js文件中将其包含到资产管道中，如下所示：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require home

但是由于您已经进行//=require tree .了上述修改，application.js因此应该没有必要，但我建议您按照上述方式进行操作，并单独包含所有文件，以便您可以更好地控制何时包含您的 JS。

编辑：另外，我建议将您使用的绑定从 ID 更改为 Class，以防您想重用此功能。

出于测试目的查看 JS 是否正在执行，您可以添加如下内容：

$(document).ready(function(){
    $('#present').mouseenter(function(){
        alert("MouseEnter!"); // This will create an alert box
        console.log("MouseEnter!"); // This will log to the JS console on your browser which is a bit nicer to read than alerts, you do not need both, just preference
        $(this).fadeIn('fast',1);
    }
    $('#present').mouseleave(function(){
        alert("MouseLeave!"); // This will create an alert box
        console.log("MouseLeave!");
        $(this).fadeIn('fast',0.5);
    }
});

这只是为了快速测试 JS，当然你不应该把这些留在你的代码中。

此外，在再次查看 JS 之后，您可能想尝试这样的事情：

$(document).ready(function(){
    $('#present').mouseenter(function(){
        $(this).fadeIn('fast',1);
    }).mouseleave(function(){
        $(this).fadeIn('fast',0.5);
    });
});

注意关闭);

于 2013-01-17T02:42:28.843 回答