代码无法在jsFiddle之外工作 [英] code fails to work outside a jsFiddle
问题描述
我的目标是制作一个带有互动视频的网页，并且在这里搜索时，我看到一个指向 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的代码工作得很好，当我试图将它复制到DreamWeaver时，它崩溃了看起来JavaScript已停止工作）。
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).
我把这些放在一起：
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>
我尝试在jQuery DOM ready调用中包装JavaScript，但没有成功：
I have tried wrapping the JavaScript in a jQuery DOM ready call, with no avail:
$(document).ready(function() {
// The JavaScript here
});
推荐答案
您的jQuery代码在DOM准备就绪之前正在运行你的jQuery代码在页面中找不到任何对象，所以他们什么都不做。您应该在加载DOM项目后或者使用jQuery（document）.ready（）在body的末尾找到它，让您的代码等待DOM准备好。
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. 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.
您的jsFiddle设置为仅在加载DOM后运行您的代码，这可能是为什么它可以在jsFiddle中运行。
Your jsFiddle is set to only run your code after the DOM is loaded so that could be why it works in jsFiddle.
将您的代码更改为：
<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>
您可能还想修复脚本标记的位置。它们应该位于< head> 标记内或< body> 标记内。你既没有它们（在< head> 标签之前）。大多数浏览器都可能容忍，但在技术上不是一个好主意。
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. You have them neither (before <head> tags). Most browsers will likely tolerate, but not technically a good idea.
这篇关于代码无法在jsFiddle之外工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
