jQuery 未定义，$ 未定义且无法读取属性 'fn'

Question

我正在为大学项目制作网络应用程序。这是关于音乐的，直到我可以轻松上传音乐，但是当我要复制时，我遇到了几个问题，我一直在寻找这些问题，但还没有解决。主要是当我检查我的页面时，我总是得到 jQuery 未定义的错误，而在播放歌曲的那一刻，我得到 $ 未定义错误。但是当我在那一点加载页面并让我播放歌曲时，我可以正常播放下一首。但是每当我开始部分并尝试在开头播放它们时都行不通。并且总是需要重新加载页面才能使其正常工作。

这是html的头像：

<head>
  <script src="http://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
  <Script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#jquery_jplayer_1").jPlayer({
          ready: function () {
            $(this).jPlayer("setMedia", {
              mp3: "<%=@article.mp3.url%>"
            });
          },
          swfPath: "/js",
          wmode: "window",
          supplied: "mp3",
          useStateClassSkin: true,
          autoBlur: false,
          smoothPlayBar: true,
          keyEnabled: true,
          remainingDuration: true,
          toggleDuration: true
        });
      });
    </script>
</head>

目前我在 html 的第一行有一个 <%=render "reload"%>。因为以前我每次去评论一首歌都要加载页面。有了这个，我不必这样做。但是我仍然有上面提到的问题。这是 _reload:

<script type="text/javascript">
 $(document).ready(function() {
         location.reload();
 });
 </script>

Answer 1

您的插件页面显示您在此 post 中遗漏了一些信息。 link 到 css 文件，例如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/pink.flag/css/jplayer.pink.flag.min.css">

这是您的插件按预期工作的代码笔。 https://codepen.io/anon/pen/eEGbXG

它使用引用的 jQuery 版本 1.11.1 和插件的 CDN links 样式和 js，您也可以在这里找到：https://cdnjs.com/libraries/jplayer

我使用了您的相同标记并注释掉了您的 jPlayer 函数，它也能正常工作。

我在正文中添加了从您的插件页面引用的示例标记：http://jplayer.org/latest/quick-start-guide/step-6-audio/

希望对您有所帮助！

jQuery 未定义，$ 未定义且无法读取属性 'fn'

jQuery is not defined, $ is not defined and Cannot read property 'fn'

javascript

jquery

html

ruby-on-rails

jplayer

jQuery 未定义，$ 未定义且无法读取 属性 'fn'

jQuery is not defined, $ is not defined and Cannot read property 'fn'

javascript

jquery

html

ruby-on-rails

jplayer

jQuery 未定义，$ 未定义且无法读取属性 'fn'