0

对于我的观点，我需要让我的观点从 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 文件中，并将 css 代码放在 assets/stylesheets/billings.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

4

1 回答 1

1

让 JQuery javascript 工作的步骤：

  1. 添加gem "jquery-rails"到您的 Gemfile 并捆绑它。
  2. 跑rails generate jquery:install
  3. 将您的代码添加到billings.jsassets/javascript 下。
  4. 确保其中一个//= require_tree .或//= require billings位于application.js资产/javascript 中。
  5. 重新启动您的 Rails 服务器。

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

当您将 CSS 添加到 billings.css 时，它应该已经包含在内。

编辑

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

class NameofMyAppController < ApplicationController

如果您使用自定义布局（例如

class NameOfMyAppController < ApplicationController
  layout :custom_layout

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

<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
于 2013-09-23T09:34:34.617 回答