Question

我的html文件中有以下代码

<head>
    <link href = "css/bootstrap.min.css" rel="stylesheet">
    <link href = "css/aboutmestyle.css" rel="stylesheet">
    <script src= "js/aboutme.js" type="text/javascript"></script>

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

    <script type="text/javascript">
     $(document).ready(function(){
       $("#menubar").click(function(){
         $("#dropbox").animate({
           top: '150px',
           height:'400px',
         });
       });
     });

    </script>

<body>
    <div id="dropbox">

    </div>
</body>

然而，当我将我的js代码移动到一个名为aboutme.js的文件并注释掉标题中的js代码时，它不起作用。我的aboutme.js文件看起来像这样

window.onload = pageLoad;

function pageLoad() {
  $("#dropbox").click(function(){
    $("#dropbox").animate({
      height:'400px',
    });
  });
};

但是，如果我把它放在我的html标题中，代码就可以了。有什么理由吗？谢谢！

Answer 1

它不起作用，因为你在 jQuery库之前包含了你的jQuery代码。

<script src="js/aboutme.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

就像在原始版本中一样，您必须在jQuery库中包含自定义jQuery代码 AFTER ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/aboutme.js" type="text/javascript"></script>

完全没有理由删除DOM ready事件处理程序，因为它位于外部文件中。外部文件的内容可以与<head>中的内容完全相同。

$(document).ready(function(){ $("#menubar").click(function(){ $("#dropbox").animate({ top: '150px', height:'400px', }); }); });

Answer 2

您需要在顺序中包含JS文件，以便依赖于其他文件的文件应该包含在其他文件中。

所以，如果你在jquery之后添加aboutme，它应该可以工作

<head>
    <link href = "css/bootstrap.min.css" rel="stylesheet">
    <link href = "css/aboutmestyle.css" rel="stylesheet">


    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
     <script src= "js/aboutme.js" type="text/javascript"></script> // add aboutme here 
    </script>
    <script src= "js/bootstrap.js">
    </script>

    <script type="text/javascript">
     $(document).ready(function(){
       $("#menubar").click(function(){
         $("#dropbox").animate({
           top: '150px',
           height:'400px',
         });
       });
     });

        </script>
    <body>
        <div id="dropbox">
        </div>
    </body>

Answer 3

移动代码行：

<script src= "js/aboutme.js" type="text/javascript"></script>

在这行代码下面：

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

它应该是这样的：

<head>
    <link href = "css/bootstrap.min.css" rel="stylesheet">
    <link href = "css/aboutmestyle.css" rel="stylesheet">

    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <script src= "js/aboutme.js" type="text/javascript"></script>
    <script src= "js/bootstrap.js">
    </script>

当我把它放入一个单独的js文件时，Javascript和jQuery无法正常工作

3 个答案: