Javascript 代码无法在JSFIDLE之外工作_Javascript_Jquery_Html_Dreamweaver_Jsfiddle

Javascript 代码无法在JSFIDLE之外工作

javascript jquery html

Javascript 代码无法在JSFIDLE之外工作,javascript,jquery,html,dreamweaver,jsfiddle,Javascript,Jquery,Html,Dreamweaver,Jsfiddle,我的目标是制作一个包含互动视频的网页，在这里搜索时，我发现了一个指向视频的链接由于代码在JSFIDLE上运行得非常好，当我试图将其复制到DreamWeaver中时，代码崩溃了（JavaScript似乎已经停止工作）我把这一切都放在了一起： <html> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javasc

我的目标是制作一个包含互动视频的网页，在这里搜索时，我发现了一个指向视频的链接

由于代码在JSFIDLE上运行得非常好，当我试图将其复制到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>

jQuery代码在DOM准备就绪之前运行，因此jQuery代码在页面中找不到任何对象，因此它们什么都不做。您应该在加载DOM项后将其定位在正文的末尾，或者使用jQuery（document）.ready（）使代码等待DOM就绪

JSFIDLE设置为仅在加载DOM后运行代码，这可能就是它在JSFIDLE中工作的原因

将代码更改为：

<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>


$（文档）.ready（函数（）{
$（'#video_1，#video_2'）。隐藏（）；
$（'.icon_1'）。单击（函数（）{
$（'#video_2'）.fadeOut（函数（）{
$（'video_1'）.fadeIn（）；
});
});
$（'.icon_2'）。单击（函数（）{
$（'#视频_1'）。淡出（函数（）{
$（'video_2'）.fadeIn（）；
});
});
$（'.icon_1'）。单击（函数（）{
$（'.video_2'）.get（0.pause（）；
$（'.video_2'）.get（0）.currentTime=0；
$（'.video_1'）.get（0.play（）；
});
$（'.icon_2'）。单击（函数（）{
$（'.video_1'）.get（0.pause（）；
$（'.video_1'）.get（0）.currentTime=0；
$（'.video_2'）.get（0.play（）；
});
});

您可能还希望修复脚本标记的位置。它们应该位于

标记内或

标记内。它们都没有（在

标记之前）。大多数浏览器可能会容忍，但从技术上讲这不是一个好主意。

在html之后移动头部

看来

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


你的意思是把脚本放在？是的，这就是我想说的。你有jquery
文件在同一个文件夹中吗？另外，JSFIDLE中不存在sgrub.js，您也应该有一个用于该文件的文件。@Niloct jquery在同一个文件夹中，“sgrub.js”实际上是用于另一个部分，它不会影响它（我选中）。您应该将您的文档放在文档头中。由于HTML格式不正确，JSFIDLE正在断开的链接通知关闭问题。
<html>
<head>
<script...etc..