代码无法在jsFiddle之外工作
[英]code fails to work outside a jsFiddle
问题描述
我的目标是制作一个包含交互式视频的网页，在这里进行搜索时，我遇到了一个指向适合我的jsFiddle的链接。
由于该代码在jsFiddle上运行良好，当我尝试将其复制到DreamWeaver中时，它崩溃了（似乎JavaScript已停止工作）。
我把所有这些放在一起：
<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>
我尝试将JavaScript包装在jQuery DOM ready调用中，无济于事：
$(document).ready(function() {
// The JavaScript here
});
2 个解决方案
解决方案1
5 已采纳 2012-04-22 22:38:22
在DOM准备就绪之前，您的jQuery代码正在运行，因此您的jQuery代码在页面中找不到任何对象，因此它们什么也不做。 您应该在加载DOM项之后将其定位在正文的末尾，或者使用jQuery（document）.ready（）使您的代码等待DOM准备就绪。
您的jsFiddle设置为仅在加载DOM之后运行代码，这可能就是它在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>标记之前）。 大多数浏览器可能会容忍，但从技术上讲不是一个好主意。
解决方案2
0 2012-04-22 22:38:31
将头移到html之后
所以看起来
<html>
<head>
<script...etc..
代码无法在Dreamweaver中的jsFiddle之外工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.