为什么我的javaScript无法在本地或服务器上运行，而在jsFiddle上运行
[英]Why is my javaScript not working locally or on server, but working on jsFiddle
问题描述
This is a link to the working jsfiddle http://jsfiddle.net/akshaytyagi/SD66b/ 
这是工作jsfiddle的链接http://jsfiddle.net/akshaytyagi/SD66b/
and following is the code that I am trying to run on my website ( same as the one jsFiddle ) 以下是我尝试在我的网站上运行的代码（与一个jsFiddle相同）
I have tried on two computers. 我在两台计算机上尝试过。 What am I doing wrong? 我究竟做错了什么？
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tips = [
"creative",
"innovative",
"awesome",
"amazing",
"social"
];
setInterval(function() {
var i = Math.round((Math.random()) * tips.length);
if (i == tips.length)--i;
$('#tip').slideUp(500, function() {
var $this = $(this);
$this.html(tips[i]);
$this.toggleClass('first second');
$this.slideDown(500);
});
}, 3 *1000);
});
</script>
</head>
<body>
<div style=" background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
<div class="thousand">
<div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">The <span id="tip">creative</span><br />brand.
</div>
</div>
</div>
</body>
</html>
4 个解决方案
解决方案1
8 2012-11-09 14:29:59
You need to put the script which access DOM element in $(document).ready to make sure the elements are ready before they are accessed. 您需要将访问DOM元素的脚本放在$(document).ready ，以确保在访问元素之前准备就绪。
$(document).ready(function(){
})
Edit based on comments 根据评论进行编辑
Change 更改
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
To 至
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2jquery.min.js"></script>
解决方案2
7 已采纳 2012-11-09 14:33:23
I copy and pasted your HTML, and after }, 3 * 1000); 我复制并粘贴了您的HTML，然后在}, 3 * 1000); there is a special char. 有一个特殊的字符。
Delete that whole line ( }, 3 * 1000); 删除整行（ }, 3 * 1000); ) and re-type it. ）并重新输入。
See: 看到：
As andyb has commented, if you're loading the file locally your jquery url wont work. 正如andyb所评论的那样，如果您是在本地加载文件，则jQuery网址将无法工作。 You can either change it to http:// or upload your file somewhere. 您可以将其更改为http：//或将文件上传到某处。
解决方案3
1 2012-11-09 14:37:02
Although the right answer was already given, I've taken the liberty to fix your markup. 尽管已经给出了正确的答案，但我还是可以自由地修复您的标记。 And may I suggest you use proper CSS instead on inline styling? 我是否可以建议您在内联样式中使用适当的CSS？ It makes your code much more readable and separates markup and design as you should, 它使您的代码更具可读性，并按需分隔标记和设计，
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
var tips = [
'creative',
'innovative',
'awesome',
'amazing',
'social'
];
setInterval(function() {
var i = Math.round((Math.random()) * tips.length);
if (i == tips.length)--i;
$('#tip').slideUp(500, function() {
var $this = $(this);
$this.html(tips[i]);
$this.toggleClass('first second');
$this.slideDown(500);
});
}, 3000);
</script>
</head><body>
<div style="background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
<div class="thousand">
<div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">
The <span id="tip">creative</span><br />brand.
</div>
</div>
</div>
</body></html>
解决方案4
0 2012-11-09 15:03:43
The problem making it work, locally, was that // links do not get resolved to http:// ( src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js instead of just src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js") 在本地使其无法正常工作的问题是//链接未解析为http：//（src =“ http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min。 js，而不仅仅是src =“ // ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”）
[ Thanks to @andyb : I was wondering why Google had improper code on their site. [感谢@andyb：我想知道为什么Google在他们的网站上有不正确的代码。 ] ]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.