时间戳

首页 > 解决方案 > 无法将 javascript 从 html 文件移动到 js 文件并将其导入 application.js - rails

javascript - 无法将 javascript 从 html 文件移动到 js 文件并将其导入 application.js - rails

问题描述

我有一些 javascript（进度条）在 html 中的脚本标签中运行良好。但是我试图将它移动到 .js 文件中并导入到 application.js 但我不确定如何。我之前使用另一个javascript功能完成了它，我将整个东西放在一个函数中，（我在这里添加了函数bar（））然后导出它，然后导入application.js，但是这次它不起作用。我对javascript很陌生，谢谢。

  function bar(){
     $('.progress-wrap').each(function(){
    percent = $(this);
    bar = $(this).children('.progress-bar');
    moveProgressBar(percent, bar);
});

  // function bar(){
  // on browser resize...
  $(window).resize(function() {
    $('.progress-wrap').each(function(){
        percent = $(this);
        bar = $(this).children('.progress-bar');
        moveProgressBar(percent, bar);
    });
  });

  // SIGNATURE PROGRESS
  function moveProgressBar(percent, bar) {
      var getPercent = (percent.data('progress-percent') / 100);
      var getProgressWrapWidth = percent.width();
      var progressTotal = getPercent * getProgressWrapWidth;
      var animationLength = 1000;

      // on page load, animate percentage bar to data percentage length
      // .stop() used to prevent animation queueing
      bar.stop().animate({
          left: progressTotal
      }, animationLength);
  }
}

export {bar};

标签： javascripthtml

解决方案

如果没有完整的 html 文件和代码，很难给出一个准确的答案。但在某些情况下，问题在于顺序。例如，您使用 jQuery 或其他目前不可用的库。

通常，如果其他一切准备就绪，您应该以首先运行的方式更改脚本。在您的脚本中，您使用 jQuery，因此您可以使用

$(document).ready(function());

然后，如果您的文档准备就绪，您的脚本将首先运行。

http://learn.jquery.com/using-jquery-core/document-ready/

您可以使用浏览器中的开发人员工具检查所有内容，并检查是否可以看到一些缺少某些内容的错误。

推荐阅读