0

我正在使用 Rails 并想实现 FlipCounter。这是文档的链接 - http://bloggingsquared.com/jquery/flipcounter/。

我认为它没有显示是因为图像路径。从文档：

    Here's an example. This image is located at img/flipCounter-custom.png, each digit is 50 pixels wide and 67 pixels tall. I can use it as a flipCounter with the following code:
    $("#grunge_counter").flipCounter({imagePath:"img/flipCountercustom.png",digitHeight:67,digitWidth:50, number:244});

它在具有默认路径的普通页面中工作（不是 Rails 项目）

我把js文件和html代码放在我的页面中。

这是包含的文件：

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/counter.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.easing.1.3.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.flipCounter.1.2.pack.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

和纯 HTML：

     <div id="counter"><input type="hidden" name="counter-value" value="100" /></div>

和 jQuery 来调用它：

            $("#counter").flipCounter();

但我需要使用类似的路径：

   $("#counter").flipCounter({imagePath:"//some path//flipCountercustom.png"});

但我没有设置它。我什至尝试在 application.html.erb 文件中创建 img 目录。

编辑：尝试变体：

       $("#counter").flipCounter({imagePath: <%= image_path("flipCounter-medium.png") %> );

       -------

       $("#counter").flipCounter({imagePath: "<%= image_path("flipCounter-medium.png") %>" );

       -------

       $("#counter").flipCounter({imagePath: <%= image_path("/images/flipCounter-medium.png") %> );

图像放置在 assets/images 文件夹中

有人可以建议为什么会这样吗？

4

2 回答 2

1

确保在加载文档时添加了它

  $(function() {
    $("#counter").flipCounter({imagePath: "<%= image_path('flipCountercustom.png') %>"} );
  });

我试过了，这对我有用。

如果你想直接使用 url 而不是 image_tag 使用

 $(function() {
    $("#counter").flipCounter({imagePath: "/assets/flipCountercustom.png') %>"}           
 });
于 2012-08-22T07:25:58.650 回答
0

资产管道可能让您感到悲伤。image_path 助手（ActionView::Helpers::AssetTagHelper）可以修复你，试试：

$("#counter").flipCounter({imagePath: <%= image_path("flipCountercustom.png") %>} );
于 2012-08-21T16:33:36.437 回答