Question

我对jQuery比较新，所以我只是尝试一些基本的命令。然而，我尝试的一切都没有。例如，我试图隐藏一个元素。我有一个包含JavaScript文件main.js的文件夹（js），所以我非常确定我的文件结构是正确的

<head>
    <script src="js/main.js"></script>        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
</head>
<body>
      <div id="audio-buttons">
            <button id="prev"></button>
            <button id="play"></button>
            <button id="pause"></button>
            <button id="stop"></button>
            <button id="next"></button>
        </div>

</body>

在我的main.js文件中，我有以下

var audio;

$('#pause').hide();

Answer 1

从此改变：

<head>
    <script src="js/main.js"></script>        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
</head>
<body>
      <div id="audio-buttons">
            <button id="prev"></button>
            <button id="play"></button>
            <button id="pause"></button>
            <button id="stop"></button>
            <button id="next"></button>
        </div>

</body>

到此：

<head>      
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <script src="js/main.js"></script>  
</head>
<body>
      <div id="audio-buttons">
            <button id="prev"></button>
            <button id="play"></button>
            <button id="pause"></button>
            <button id="stop"></button>
            <button id="next"></button>
        </div>

</body>

并在main.js中使用：

var audio;
$(document).ready(function() {
  $('#pause').hide();
});

或

var audio;
jQuery(document).ready(function() {
  jQuery('#pause').hide();
});

更新了答案，因为最后缺少) 并在自己的网站上了解有关jquery的更多信息：

https://learn.jquery.com/

Answer 2

加载jquery后，必须调用jquery函数。您应该将它放在事件处理程序中，或放在.ready函数中。

＆＃13;

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $().ready(function() {
      $('#pause').hide();
    });
  </script>
</head>

<body>
  <div id="audio-buttons">
    <button id="prev">Prev</button>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="stop">Stop</button>
    <button id="next">Next</button>
  </div>
</body>

＆＃13;

Answer 3

在使用之前加载jQuery：

<head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/main.js"></script>        
</head>

加载文档后需要调用函数：

var audio;
$(document).ready(function() {
  $('#pause').hide();
}

Answer 4

交换<script>代码的顺序。加载 main.js后应该加载jQuery，否则它将无法正常工作。

Answer 5

您的JS文件在准备就绪后立即加载并执行，这意味着它可能在您的DOM准备就绪之前运行。

要解决此问题，您有几个选择。首先，您可以将所有内容包装在“准备好”的功能中，例如Aragorn在他的回答中建议的，或者您可以延迟加载文件（在这种情况下推荐）。

因此，请尝试在<script src="js/main.js"></script>之后移动</body>并再次运行您的代码。

还有另外一件事：jQUery的某些组件对命令很敏感。话虽这么说，你应该首先加载jQuery，然后使用它，而不是相反。这很可能是导致问题的原因，因为浏览器可能会在jQuery定义$('#pause').hide();之前尝试运行$。

Answer 6

您忘记检查页面是否已满载：

var audio;
$(document).ready(function() {
  $('#pause').hide();
});

请考虑更改加载类别：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
<script src="js/main.js"></script>

很高兴为您服务！

Javascript函数无法正常工作

6 个答案: