Question

我一直在谷歌搜索过去一小时左右，但似乎无法找到解决这个问题的方法。我刚从codecademy完成了jQuery课程，现在正在开发一个项目。由于某种原因，我的代码jquery代码将无法正常工作

jQuery：

$(document).ready(function(){
$("div").css("border", "3px solid red");
$(".storyblocks").mouseenter(function(){
    $(this).animate({
        height: "+= 20px"
        width: "+= 20px"
    });
});

$(".storyblocks").mouseleave(function(){
    $(this).animate({
        height: "-= 20px"
        width: "-= 20px"
    });
});
});

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Project Website</title>
<link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>

我添加了$("div").css("border", "3px solid red");来检查div是否有红色边框，到目前为止没有运气。有人说我不需要$（文件）.ready，但我不明白为什么不。

请帮帮忙？

Answer 1

你的jQuery无法解决的问题与将jQuery放在一个单独的文件中没有关系，它与一个小的语法错误有关：你的动画属性和你的动画属性之间没有逗号animate属性使用的语法不正确。

这是您的代码，但带有必要的逗号，以及动画属性的正确语法：

http://jsfiddle.net/4xfAZ/2/

逗号在这里：

$(document).ready(function () {

    $("div").css("border", "3px solid red");
    $(".storyblocks").mouseenter(function () {
        $(this).animate({
            height: ($(this).height() + 20) + 'px',
            width: ($(this).width() + 20) + 'px'
        });
    });

    $(".storyblocks").mouseleave(function () {
        $(this).animate({
            height: ($(this).height() - 20) + 'px',
            width: ($(this).width() - 20) + 'px'
        });
    });
});

在高度声明之后，在下一个声明之前，您需要用逗号分隔。

因为你的jQuery出错了，它没有做任何事情，这就是为什么你没有看到红色边框:)尽管红色边框代码与有问题的代码是分开的。

HTH

Answer 2

这将设置边框：

$("div").css("border", "3px solid red");

检查div是否与3px有红色边框：

 if( $("div").css("border") == "3px solid red") {
    console.log('border have red color')
 }

Answer 3

试试这个：

+=20px无效，您需要找到div的高度，然后加/减20px。

    $(document).ready(function(){
        $("div").css("border", "3px solid red");
        $(".storyblocks").mouseenter(function(){
            var h = $(this).height()+20;
            var w = $(this).width()+20;
            $(this).animate({
                height: h+"px",//add comma here
                width: w+"px"
            });
        });
        $(".storyblocks").mouseleave(function(){
            var h = $(this).height()-20;
            var w = $(this).width()-20;
            $(this).animate({
                height: h+"px",//add comma here
                width: w+"px"
            });
        });
    });

Fiddle here.

Answer 4

我想在另一个 js 文件中分离我的 jquery 方法。所以我把 Jquery 文件像脚本一样放在 js 文件上并将 src 放在主文件中。

我在 html 文件中写了这段代码

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

和 javasciript 文件中的这段代码

$(document).ready(function () {
  $("#some_id").hide(1500);
});

如何将jquery放在单独的文件中？

4 个答案: