代码无法在jsFiddle之外工作
[英]code fails to work outside a jsFiddle
问题描述
I aim to make a web page with interactive videos, and while searching here I came across a link pointing to a jsFiddle that suits my needs . 
我的目标是制作一个包含交互式视频的网页，在这里进行搜索时，我遇到了一个指向适合我的jsFiddle的链接。
As the code worked perfectly fine on the jsFiddle, it broke down when i tried to copy it into DreamWeaver (it seems the JavaScript had stopped working). 由于该代码在jsFiddle上运行良好，当我尝试将其复制到DreamWeaver中时，它崩溃了（似乎JavaScript已停止工作）。
I had put it all together as such: 我把所有这些放在一起：
<html>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="sgrub.js"></script>
<script>
$('#video_1, #video_2').hide();
$('.icon_1').click(function() {
$('#video_2').fadeOut(function() {
$('#video_1').fadeIn();
});
});
$('.icon_2').click(function() {
$('#video_1').fadeOut(function() {
$('#video_2').fadeIn();
});
});
$('.icon_1').click(function() {
$('.video_2').get(0).pause();
$('.video_2').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
$('.icon_2').click(function() {
$('.video_1').get(0).pause();
$('.video_1').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
</script>
<head></head>
<body>
<div class="icon_1" id="mediaplayer">
cadillac
</div>
<div class="icon_2" id="mediaplayer2">
nike
</div>
<div id="video_1">
<video class="video_1" width="50%" height="50%" controls="controls"
poster="http://www.birds.com/wp-content/uploads/home/bird.jpg">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"
type="video/mp4" />
</video>
</div>
<div id="video_2">
<video class="video_2" width="50%" height="50%" controls="controls"
poster="http://www.birds.com/wp-content/uploads/home/bird.jpg">
<source src="images/01.mp4" type="video/mp4" />
</video>
</div>
</body>
</html>
I have tried wrapping the JavaScript in a jQuery DOM ready call, with no avail: 我尝试将JavaScript包装在jQuery DOM ready调用中，无济于事：
$(document).ready(function() {
// The JavaScript here
});
2 个解决方案
解决方案1
5 已采纳 2012-04-22 22:38:22
Your jQuery code is running BEFORE the DOM is ready so your jQuery code doesn't find any objects in the page so they don't do anything. 在DOM准备就绪之前，您的jQuery代码正在运行，因此您的jQuery代码在页面中找不到任何对象，因此它们什么也不做。 You should either locate it at the end of the body AFTER the DOM items are loaded or use jQuery(document).ready() to make your code wait until the DOM is ready. 您应该在加载DOM项之后将其定位在正文的末尾，或者使用jQuery（document）.ready（）使您的代码等待DOM准备就绪。
Your jsFiddle is set to only run your code after the DOM is loaded so that could be why it works in jsFiddle. 您的jsFiddle设置为仅在加载DOM之后运行代码，这可能就是它在jsFiddle中起作用的原因。
Change your code to this: 将代码更改为此：
<script>
$(document).ready(function() {
$('#video_1, #video_2').hide();
$('.icon_1').click(function(){
$('#video_2').fadeOut(function(){
$('#video_1').fadeIn();
});
});
$('.icon_2').click(function(){
$('#video_1').fadeOut(function(){
$('#video_2').fadeIn();
});
});
$('.icon_1').click(function(){
$('.video_2').get(0).pause();
$('.video_2').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
$('.icon_2').click(function(){
$('.video_1').get(0).pause();
$('.video_1').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
});
</script>
You probably also want to fix the location of your script tags. 您可能还想修复脚本标签的位置。 They should either be inside the <head> tags or inside the <body> tags. 它们应该位于<head>标记内或<body>标记内。 You have them neither (before <head> tags). 您都没有（在<head>标记之前）。 Most browsers will likely tolerate, but not technically a good idea. 大多数浏览器可能会容忍，但从技术上讲不是一个好主意。
解决方案2
0 2012-04-22 22:38:31
Move head just after html 将头移到html之后
So it looks like 所以看起来
<html>
<head>
<script...etc..
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.