代碼無法在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.