代码无法在 jsFiddle 之外工作

code fails to work outside a jsFiddle

本文关键字：工作 jsFiddle 代码      更新时间：2023-09-26

我的目标是制作一个带有交互式视频的网页，在这里搜索时，我遇到了一个指向适合我需求的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就绪调用中，但无济于事：

$(document).ready(function() {
    // The JavaScript here
});

你的jQuery代码在DOM准备好之前就已经运行了，所以你的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>标签之前）。 大多数浏览器可能会容忍，但从技术上讲不是一个好主意。

在 html 之后移动头部

所以它看起来像

<html>
<head>
<script...etc..
相关文章：