代码无法在 jsFiddle 之外工作答案

【问题标题】：code fails to work outside a jsFiddle代码无法在 jsFiddle 之外工作
【发布时间】：2012-04-22 22:34:55
【问题描述】：

我的目标是制作一个包含交互式视频的网页，在此处搜索时，我发现了一个指向 jsFiddle that suits my needs 的链接。

由于代码在 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 文件吗？此外，sgrub.js 不存在于 jsfiddle 中，您也应该有一个文件。
@Niloct jquery 在同一个文件夹中，而“sgrub.js”实际上是另一部分，它不影响它（我检查过）。
你应该把你的
jsfiddle 的链接已损坏
由于 HTML 格式错误而投票结束问题。

标签： javascript jquery html dreamweaver jsfiddle

【解决方案1】：

您的 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> 标签之前）。大多数浏览器可能会容忍，但在技术上不是一个好主意。

【讨论】：

【解决方案2】：

在 html 之后移动头部

看起来像

<html>
<head>
<script...etc..

【讨论】：

你的意思是把脚本放在里面？
是的，这就是我想说的。