Question

我正在学习jQuery，在添加代码之后，我设置的那些函数根本没有运行。注意到，大约2周前，它们运行正常，因此在HTML中链接文件时没有错误。但现在，我在Chrome中打开html文件，它根本不起作用。

此外，当它运行时（2周前），我试图挂钩3.2.1版本，但它根本没有运行。当我尝试旧版本2.1.4时，它起作用了。请帮忙

这是我的代码：

HTML：

<html>
    <head>            
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
    </head>
    <body>

        <div class="box">a box</div>

        <div id="navArrows">
            <button id="left" class="navigationArrow">&larr;</button>
            <button id="up" class="navigationArrow">&uarr;</button>
            <button id="right" class="navigationArrow">&rarr;</button>
            <button id="down" class="navigationArrow">&darr;</button>
        </div>

        <!-- Load the CDN version first -->
        <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <!-- Load the local version incase the CDN fail -->
        <script>window.jQuery || document.write('<script type="text/javascript" src="js.jquery-2.1.4.js"><\/script>')</script>

        <!-- Hook in the script.js file -->
        <script type="text/javascript" src="js/script.js"></script>

    </body>
</html>

这是我上传的script.js文件：

。

 $(document).ready(function() {

    // Move the box left and increase the fontSize 2px each click
    $('#left').click(function() {
        $('.box').animate({
            left: "-=40px",
            fontSize: "+=2px"
        }, function() {
            // animation is complete

        });
    });

    $('#up').click(function() {
        $('.box').animate({
            top: "-=40px",
            opacity: '+=0.1'
        }, function() {
            // animation is complete

        });
    });

    $('#right').click(function() {
        $('.box').animate({
            left:'+=40px',
            fontSize: '-=2px'
        },function() {

        });
    });

    $('#down').click(function() {
        $('.box').animate({
            top:'+=40px',
            opacity: '-=0.1'
        },function() {

        });
    });

这是我的css代码

#navArrows {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 100px auto 0;
    background: #333;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    padding: 20px;
}

.navigationArrow {
    width: 50px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 20px;
    left: 20px;
    background: white;
    color: #222;
}

#up {
    left: 50%;
    margin-left: -25px;
}

#left, #right {
    top: 50%;
    margin-top: -25px;
}

#right {
    right: 20px;
    left: inherit;
}

#down {
    bottom: 20px;
    top: inherit;
    left: 50%;
    margin-left: -25px;
}

.box {
    height: 100px;
    width: 100px;
    background: #a7f;
    color: white;
    border: solid 4px #a1f;
    line-height: 100px;
    margin: 100px auto 0;
    opacity: 0.5;

    position: relative;            
}

使用＃和＆＃34;。＆＃34;正确输入css代码，与此处的方式不同。我试过但不能正确使用

Answer 1

将您的CDN导入更新为

<!-- Load the CDN version first -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

您可以在此处找到解决方案：jQuery CDN is not loading on LocalHost

Answer 2

检查并且工作正常。

https://jsfiddle.net/3naqL5wa/

问题在于“向上”和“向下”按钮。你的元素没有css属性“position：absolute;”所以top和left对他们不起作用。

.box{
  position: absolute;
}

Answer 3

请将CDN版本的src属性更改为绝对URL：
如果你没有连接到互联网，本地jQuery版本加载是好的。但是在实时服务器上，只需将其删除即可。
在Chrome浏览器中，输入Events.findOne({ where: { weekDays: { [Sequelize.Op.overlap]: [2, 3], }, }, });以打开浏览器控制台进行调试。在控制台上写：jQuery，如果显示未定义，那么你知道jQuery尚未加载，因此你的代码将无法运行。

我的jQuery代码没有运行

3 个答案: