Question

正在测试一些JQuery的东西（我对此很新），但我不能让jquery工作！首先，它工作了两三次，然后它停止工作（非常奇怪），所以我改变了一些东西，现在它根本不起作用。 JQuery和script.js加载但似乎无法正常工作

的index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" />
        <link href="main.css" rel="stylesheet" type="text/css" />
        <script src="script.js" type="text/javascript"></script>
        <title>Manuel Pepe</title>
    </head>
    <body>
        <div id="nav-bar" class="nav-bar">
            <div id="container">
                <img id="nav-button" class="nav-button" src="imgs/menu.png" />
                <div id="nav-menu" class="nav-menu">
                </div>
            </div>
        </div>
        <div class="front-page">
            <div class="logo">
                <h1>Manuel Pepe</h1>
                <h3>Test</h3>
            </div>
        </div>
    </body>
</html>

的main.css

html{
position:relative;
height:100%;
background-color: #6E6E6E; 
}

#container{}

.nav-button{
    position:absolute;
    margin-top: -2px;
    margin-left: 7px;
    width: 32px;
    height: auto;
    z-index:1;
} 

.nav-menu{
    background-color:#424242;
    position:absolute;
    top:0px;
    left:0px;
    width: 200px;
    height:100%;
}

.logo{
    position: relative;
    top:250px;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: 225px;
}

.logo h3, h1{
    text-align:center;
    font-family: Sansita One;
    color: #222;
    text-shadow: 0px 2px 3px #555;
}

.logo h1{
    margin-bottom: 3px;
}

.logo h3{
    margin-top: 2px;
}

.hover-rotate:hover {
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);

}

的script.js

$(document).ready(function(){
    $("#nav-button").mouseover(function(){
        $(this).addClass("hover-rotate");
    });
    $("#nav-button").mouseleave(function(){
        $(this).removeClass("hover-rotate")
    })
});

为什么这不起作用？

另外，有没有办法改进JQuery代码？

Answer 1

您可以使用$(document).ready(function(){...构造函数代替$(function () { $("#nav-button").mouseover(function(){ $(this).addClass("hover-rotate"); }); $("#nav-button").mouseleave(function(){ $(this).removeClass("hover-rotate") }) });：

{{1}}

Answer 2

使用类似

的条件在javascript中设置超时

if (typeof jQuery != "undefined")

Answer 3

我正在测试时似乎工作正常。看到这个JSFiddle：https://jsfiddle.net/v1t54urc/2/

你确定你的jQuery被加载了吗？还要确保正确加载CSS。尝试在标题中使用以下代码以确保：

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

还有一件事。别忘了;在代码的最后，像这样：

$("#nav-button").mouseleave(function(){
    $(this).removeClass("hover-rotate");
});

Answer 4

更改行以确保正确加载JQuery：

<script src="jquery-2.1.4.min.js" type="text/javascript"></script>

通过

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

如果您进行更改并且网络有效，旧线路无法找到＆＃34; jquery-2.1.4.min.js＆＃34;在文件夹中。

JQuery加载但不起作用

4 个答案: