Question

对于我的观点，我需要让我的视图从css文件中选择样式。我的视图中还有一些javascript代码。问题是视图既不挑选样式也不挑选javascript代码。这是我第一次使用javascript工作在rails视图上搜索网页以获取答案。我在下面的链接中找到了一些详细的解释，但答案很多。

http://stackoverflow.com/questions/7763675/rails-3-1-newbie-where-should-i-put-javascript-code

我尝试将我的javascript代码放在assets / javascripts / billings.js文件中，类似于assets / stylesheets / billings.css文件中的css代码，但它不起作用。我假设这里放置代码将起作用，而billings控制器的index.html.erb文件将选择此项。我是否需要在索引文件中引用此路径。以下是billings.js文件中的代码

<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#up").on('click',function(){
        $("#qty input").val(parseInt($("#qty input").val())+1);
    });

    $("#down").on('click',function(){
        $("#qty input").val(parseInt($("#qty input").val())-1);
    });

    $("#first").on('click',function(){
        $("ul").hide();
        $("#starter").show();


    });
    $("#drinkMenu").on('click',function(){
        $("ul").hide();
        $("#Drinks").show();
    });
    $("#vege").on('click',function(){
        $("ul").hide();
        $("#veg").show();
    });
    $("#last").on('click',function(){
        $("ul").hide();
        $("#special").show();
    });
});


</script>

index.html.erb文件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>System</title>


</head>
<body>
<div class="main">
<div class="tabelorder">
<label> Tabel Number:</label> <input type="number"  placeholder="Table NO.">
        <input type="search"  placeholder="Search Products" /> 

</div>

<div class="right-block">
<div class="RightHeader">
<a href="#" class="RightHeaderMenuItem" id="first">
 starter</a>
<a href="#" class="RightHeaderMenuItem" id="drinkMenu">
Drinks Menu</a>
<a href="#" class="RightHeaderMenuItem" id="vege">
Vegetarianas</a>
<a class="RightHeaderMenuItemLast" id="last">
Special Menu</a>
</div>
<div class="MenuItem">
<ul id="starter">
<li>starter</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul id="Drinks">
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul id="veg">
<li>vegetarianas</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul id="special">
<li>special</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<div class="table_list">
<button type="submit">Table 1</button>
<button type="submit">Table 2</button>
<button type="submit">Table 3</button>
<button type="submit">Table 4</button>
<button type="submit">Table 5</button>
<button type="submit">Table 6</button>
</div>
<div class="left-block">
    <!--<div class="LeftHeader">
        <input type="search"  placeholder="Search Products"/> 
    </div>-->
    <div class="LeftBorderBlock">
        <img src="images/grid2Whitepressed.png" height="60" />
        <div id="qty">

        <button type="button" id="up">+</button>
        <button type="button" id="down">-</button>
         <input type="number" value="0" />
        </div>


        <!-- <img  src="images/2.png" id="up">
        <img src="images/1.png" id="down" style="margin-top:-6.5%;">-->

    </div>
    <div class="LeftMiddleBlock">
    <div class="AddItem">
    <div class="AddItemDtailQty">2</div>
    <div class="AddItemDtail">aaaaa</div>
    <div class="AddItemDtailPrice">@$522</div>
     <div class="AddItemDtailPrice">$1044</div>
    <div class="CancelItemDtail"><img src="images/icon_error.png" height="20"/></div>
    </div>
     <div class="AddItem">
    <div class="AddItemDtailQty">2</div>
    <div class="AddItemDtail">aaaaa</div>
    <div class="AddItemDtailPrice">@$522</div>
     <div class="AddItemDtailPrice">$1044</div>
    <div class="CancelItemDtail"><img src="images/icon_error.png" height="20"/></div>
      </div>
     <div class="AddItem">
   <div class="AddItemDtailQty">2</div>
    <div class="AddItemDtail">aaaaa</div>
    <div class="AddItemDtailPrice">@$522</div>
     <div class="AddItemDtailPrice">$1044</div>
    <div class="CancelItemDtail"><img src="images/icon_error.png" height="20"/></div>
    </div>



    </div>
    <div class="LeftBorderBlock">
            <div class="calculationBill">
                <div class="LeftText">Subtotal</div>
                <div class="Righttext">$130.47</div>
            </div>
            <div class="calculationBill">
                <div class="LeftText">Tax</div>
                <div class="Righttext">$10.43</div>
            </div>
            <div class="calculationBill">
            <strong>
                    <div class="LeftText">Total</div>
                <div class="Righttext">$141.00</div></strong>

            </div>
            <div class="calculationBill">
            <div class="DividerLine"></div>
            <strong>
                    <div class="LeftText">To Pay</div>
                <div class="Righttext">$141.00</div></strong>
            </div>
    </div>
<button type="submit">Void</button> 
<button type="submit">Park</button>
<button type="submit">Notes</button>
<button type="submit">Discount</button>
<button type="submit">Pay</button>
</div>

</div>


</body>
</html>

我正在使用Rails 3.1.1

Answer 1

让JQuery javascript工作的步骤：

将gem "jquery-rails"添加到您的Gemfile并捆绑它。
运行rails generate jquery:install
将您的代码添加到assets / javascript下的billings.js。
确保//= require_tree .或//= require billings位于资产/ javascript中的application.js。
重新启动rails服务器。

如果可能，您应该避免在自己的JS中包含脚本。

将你添加到billings.css时应该包含CSS。

修改

由于某种原因，您的布局似乎没有引入默认的JS和CSS。在Rails控制器的顶部，它应该类似于：

class NameofMyAppController < ApplicationController

如果您使用的是自定义布局（例如
）
class NameOfMyAppController < ApplicationController layout :custom_layout

然后，您需要编辑该自定义布局，以将标准JS和CSS标记添加到<head></head>内的custom_layout.html.erb中：

<%= stylesheet_link_tag "application" %> <%= javascript_include_tag "application" %>

添加Javascript和; rails中的CSS

1 个答案: