我对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'
config/routes.rb:
root to: 'static_pages#home'
app/controllers/static_pages_controller.rb:
def home
@Presents = Present.all.reverse.take(20)
end
app/views/layouts/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>
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
app/views/static_pages/home.html.erb:
<div class="jumbotron">
<h1>Heading</h1>
</div>
<%= render 'shared/list' %>
app/views/shared/_list.html.erb:
<% if @Presents.any? %>
<%= render partial: 'shared/list_item', collection: @Presents %>
<% end %>
app/views/shared/_list_item.html.erb:
<div id="present">
<ul id="<%= list_item.id %>">
<span class="content">
Some content here
</span>
</div>
理想情况下,我希望我的 jQuery 能够影响 id 为 "present" 的
:
$(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
中使用第二个参数来控制透明度,但是它不支持。