无法在导轨中显示倒数计时器答案

【问题标题】：Unable to display the count down timer in rails无法在导轨中显示倒数计时器
【发布时间】：2014-01-02 12:59:23
【问题描述】：

我在我的 rails 应用程序中使用数字倒计时插件（url:https://github.com/Reflejo/jquery-countdown）。我已将 jquery.countdown.js 文件放在 assets/javascript 中，并在 application.js 中使用了 //= require jquery.countdown 并将digits.png 放在 assets 文件夹中。我正在使用以下代码

<body>    
<script>
$('.counter').countdown({
image: "url('/assets/digits.png')",
format: "mm:ss",
endTime: new Date(2014,1,2,18,05),
timerEnd: function() { alert('end!!'); }
});
</script>
<div class="counter"></div>
</body>

而application.js的代码是

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require jquery.countdown
//= require_tree .

问题是我可以在倒计时结束后收到警报，但无法在前端看到/加载倒计时计时器。谁能帮我解决这个问题。

【问题讨论】：

显示你的 application.js
添加了application.js代码。
你在使用资产管道吗？
是的，我正在使用资产管道。

标签： javascript jquery ruby-on-rails asset-pipeline countdowntimer

【解决方案1】：

以下内容对我有用。将倒计时函数放入 $(function(){});

这意味着一旦加载了 DOM，您就要求 jQuery 将倒计时绑定到 div 类“计数器”。

另外，不要在倒计时函数的 images 参数中指定 url()。事实上，只需将 digits.png 粘贴到公用文件夹中，然后从倒计时功能中删除图像选项。让电脑为你工作！！

<script>
$(function(){
    $('.counter').countdown({
    images: "digits.png",
    format: 'hh:mm:ss',
    endTime: "12:32:55",
    timerEnd: function() { alert('end!!'); }
  });
});
</script>

【讨论】：

不适合我。但它显示两个分号。顺便说一句，我可以知道您将 .js 文件保存在哪里以及您如何在 application.js 文件中引用它。
将你的倒计时 js 放入 app/assets/javascripts 并从 application.js 中删除这行 "//= require jquery.countdown"
我已经在示例项目 (github.com/khadarbasha/app_test) 上测试了您的方法，在这种情况下，由于 .js 文件未加载，因此无法找到倒计时方法。 PS：在产品控制器的索引页面中实现了倒计时。
我想知道我在哪里做错了。

【解决方案2】：

你需要在require_tree .之前要求它

【讨论】：

取出 turbolinks 看看会发生什么。如果它在删除 turbolinks 后有效，那么您可能只需要 github.com/kossnocorp/jquery.turbolinks

【解决方案3】：

当你使用这样的插件时，建议将它放在vendor目录下，所以在这个插件中有3个文件夹：css，img，和js，首先下载这些文件夹然后拿每个文件夹里面你想要的文件，比如js文件夹里面有jquery.countdown.js和jquery.countdown.min.js，这两个文件是一样的，只是第二个压缩了，更方便生产使用，第一个不压缩，如果你想看看插件是如何工作的，你可以在开发中使用它来获得可读的代码......所以使用其中一个。对于css，有一个名为media.css的文件，不要忘记复制你想要的图片，它也在img文件夹中

第二步：将js文件放在/vendor/assets/javascript下，media.css放在vendor/assets/stylesheets下，你可以暂时把你需要的图片放在你的media.css或者像你一样放在/assets/images/下，调用$('.counter').countdown()时使用正确的路径引用它

最后一步是在 application.js 和 application.css 中要求你的 js 和 css 文件：

应用程序.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require jquery.countdown
//= require_tree .

应用程序.css

.....
//= require media
....

也不要忘记将你的脚本放在 $(function(){ // 你的脚本 }) 中，以确保在应用 .countdown() 函数之前加载你的 $('.counter') 元素，正如 @beck03076 所说的那样

【讨论】：