code fails to work outside a jsFiddle

前端未结

关注

 2  1747

I aim to make a web page with interactive videos, and while searching here I came across a link pointing to a jsFiddle that suits my needs.

As the code worked perfec

相关标签:

2条回答

心在旅途

2020-12-07 07:03
Your jQuery code is running BEFORE the DOM is ready so your jQuery code doesn't find any objects in the page so they don't do anything. You should either locate it at the end of the body AFTER the DOM items are loaded or use jQuery(document).ready() to make your code wait until the DOM is ready.

Your jsFiddle is set to only run your code after the DOM is loaded so that could be why it works in jsFiddle.

Change your code to this:
```
<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>
```
You probably also want to fix the location of your script tags. They should either be inside the <head> tags or inside the <body> tags. You have them neither (before <head> tags). Most browsers will likely tolerate, but not technically a good idea.
0 讨论(0)
发布评论:

提交评论
- 加载中...
感动是毒

2020-12-07 07:15
Move head just after html

So it looks like
```
<html>
<head>
<script...etc..
```
0 讨论(0)
发布评论:

提交评论
- 加载中...