Question

我有一个html文件，我需要用Rails风格重写它。我试图阅读导轨指南，但无法找到有用的信息。这是我所拥有的HTML的一部分。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<% content_for :head do -%>
  <%= stylesheet_link_tag 'css.css' %>

<% end %>

<head>
<title>index</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" media="all" type="text/css" href="css/css.css" />
<script language="JavaScript" type="text/javascript" src="images/jquery-1.7.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="images/jQuery.infiniteCarousel.js">        
</script>
<script language="JavaScript" type="text/javascript" src="images/jQuery.tbSwitching.js"></script>
<script language="JavaScript" type="text/javascript" src="images/myfocus-1.2.4.full.js"></script>
<script language="JavaScript" type="text/javascript" src="images/mF_expo2010.js"></script>
<link href="images/mF_expo2010.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="top">
 <div class="one">
     <div class="one1">
         <img src="images/ico1.png"  width="225" height="58"/>
     </div>
     <div class="one2">
         <div class="one3">
              <div class="one4">Login/Sign up</div> 
              <div class="one4">Create an Account </div>    
              <div class="one5">shopping bag</div>   
         </div>
     </div>
  </div>
</div>
<div class="two">
<% content_for :below_body do -%>
  <%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>
  <%= javascript_include_tag 'images/jQuery.infiniteCarousel.js' %>
 <%= javascript_include_tag 'images/jQuery.tbSwitching.js' %>
 <%= javascript_include_tag 'images/myfocus-1.2.4.full.js' %>
     <%= javascript_include_tag 'images/mF_expo2010.js' %>
<% end %>   

<script>
$(function(){
    $("#top .two3").hover(function(){   
    $("#top .two3").removeClass("on").next(".two4").removeClass("ac");
    $(this).addClass("on").next(".two4").addClass("ac");        
},function(){   

});
})
</script>
<script>
$(function(){
    $("#top .two5 a").hover(function(){     
    $(this).addClass("on");     
},function(){   
    $(this).removeClass("on");
    });
})
</script>
......
</body>
</html>

我试图通过在body标签内使用下面的代码来修改它，但似乎没有用。

<% content_for :below_body do -%>
    <%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>
    <%= javascript_include_tag 'images/jQuery.infiniteCarousel.js' %>
    <%= javascript_include_tag 'images/jQuery.tbSwitching.js' %>
    <%= javascript_include_tag 'images/myfocus-1.2.4.full.js' %>
    <%= javascript_include_tag 'images/mF_expo2010.js' %>
<% end %>

我应该把它放在头部吗？我也应该对标签做任何事情吗？感谢

Answer 1

一般的经验法则是库应该进入头部（如jQuery），所有其他使用jQuery的代码都应该在代码之下。这样做的原因是，您希望与jQuery作为DOM元素进行交谈的所有内容都必须在文档中呈现（即在您的js代码之上）。

我通常做的是在页面末尾附加所有内容，即所有脚本。这样，页面本身的加载时间将减少，因为来自HTTP的请求不首先加载JS，然后加载HTML。

Answer 2

你得到什么错误？没有看到错误，我们无法知道问题的来源，必然。

您是否将JS文件保存在rails_root/app/assets/javascripts/images中？这就是你上面所说的。

例如<%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>会创建此标记：<script type="text/javascript" src="/javascripts/images/jquery-1.7.1.min.js?1284139606"></script>，其时间戳与文件构建时间有关。

如果您在生产模式而不是开发模式下运行服务器，这也可能是一个问题。在生产模式下，您需要预编译资产：rake assets:precompile。

在Ruby on Rails中集成Javascript

2 个答案: