Question

我是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

的Gemfile：

gem 'jquery-rails'

配置/ routes.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>

应用程序/资产/ Javascript角/ application.js中：

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

应用程序/视图/ 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>与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。 {I}尝试时fadeIn不接受不透明度的第二个参数。

Answer 1

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

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

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

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

出于测试目的，查看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);
    });
});

请注意结束);

我应该将jQuery代码放在Ruby on Rails应用程序中的哪个位置？

1 个答案: