3

过去一个小时左右我一直在谷歌搜索，但似乎无法找到解决这个问题的方法。我刚刚完成了 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 是否有红色边框，到目前为止还没有运气。有人说我不需要 $(document).ready，但我不明白为什么不需要。

请帮忙？

4

4 回答 4

4

您的 jQuery 无法正常工作的问题与将 jQuery 放在单独的文件中无关，它与一个小的语法错误有关：您的动画属性之间没有逗号，并且您的动画属性是使用不正确的语法。

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

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 出错了，它什么也没做，这就是为什么你没有看到红色边框:) 即使红色边框代码与有问题的代码是分开的。

高温高压

于 2013-11-08T04:36:09.747 回答
1

这将设置边框：

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

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

 if( $("div").css("border") == "3px solid red") {
    console.log('border have red color')
 }
于 2013-11-08T04:34:53.407 回答
1

尝试这个：

+=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"
            });
        });
    });

在这里拉小提琴。

于 2013-11-08T04:37:46.877 回答
0

我想将我的 jquery 方法分隔在另一个 js 文件中。所以我将 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>

和 javascript 文件上的这段代码

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

于 2021-04-18T09:16:49.580 回答