过去一个小时左右,我一直在谷歌上搜索,但似乎无法找到解决此问题的方法。我刚刚完成了 codecademy 的 jQuery 类(class),现在正在做一个元素。由于某种原因,我的代码 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,但我不明白为什么不需要。
请帮忙?
最佳答案
你的 jQuery 不工作的问题与将你的 jQuery 放在一个单独的文件中无关,它与一个小的语法错误有关:你的动画属性和你的动画属性之间没有逗号动画属性使用的语法不正确。
这是您的代码,但带有必要的逗号和动画属性的正确语法:
逗号在这里:
$(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
关于javascript - 我如何将 jquery 放在一个单独的文件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19851606/