jQuery没有正确执行

Question

这看起来有点像一个简单的问题，但它一直困扰着我，我无法解决它。我正在尝试使div被点击按钮替换为iframe。尽管这个问题过于简单，而且我已经有了正确的答案，但由于某种原因，我无法运行它。

首先，它是给我：

$没有定义

我知道这是关于没有被正确地在HTML文件中插入了jQuery库的问题。之后我重新编译了我的库，但仍然无法正常执行。

我已经准备好了大多数以前的主题，jQuery并没有提供所有可能的解决方案。我很清楚前面的两个问题，一个是33，另一个是26个答案。

我甚至试图将jQuery下载到一个文件并利用它本地化，但它仍然无法运行。你能帮我弄清楚如何解决这个问题。

jQuery代码：

$('.playbutton,img').click(function(){ 
      var video = '<div class="video-container"><iframe src="'+ $('img').attr('data-video') +'"></iframe></div>'; 
      $('.video').hide(); 
     $('.tube').html(video); 
     $('.close').show(); 
     }); 
$('.close').click(function(){ 
      $('.video').show(); 
     $('.tube').empty(); 
    $('.close').hide(); 
     }); 

HTML代码：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

      <img src ="img/beme.png" class ="logo"> 
      <a class="navbar-brand" href="#">Navbar</a> 
     </div> 

     <div id="navbar" class="navbar-collapse collapse"> 
      <form class="navbar-form navbar-right"> 
      <div class="form-group"> 
       <input type="text" placeholder="Email" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <input type="password" placeholder="Password" class="form-control"> 
      </div> 
      <button type="submit" class="btn btn-success">Sign in</button> 
      <button type="submit" class="btn btn-success">Register</button> 
      </form> 
     </div><!--/.navbar-collapse --> 
     </div> 
    </nav> 

<div class ="banner"> 
    <div class ="row" id ="mid-row"> 
      <img src ="img/background.png" id ="big-image"> 
      <img src ="img/play-button.png" id ="play"> 
    </div> 



<div class="video"> 
<div class="playbutton">Play</div>  
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1"> 
    </div> 
    <div class="tube"></div> 
    <div class="close">Close X</div> 

</div> 

如何我库插入：

<script src="scripts/jquery-3.1.0.js"></script> 
<!-- Angular and Bootstrap files --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Angular and Bootstrap Files --> 

<!-- Personal CSS file --> 
<link rel ="stylesheet" href ="css/style.css"> 
<!-- Personal CSs file --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 

我基本上是试图重新创建的jsfiddle，但没有运气： http://jsfiddle.net/ANRHT/6/

Answer 1

$('.playbutton,img').click(function(){ 
 
       var video = '<div class="video-container"><iframe src="'+ $('img').attr('data-video') +'"></iframe></div>'; 
 
       $('.video').hide(); 
 
      $('.tube').html(video); 
 
      $('.close').show(); 
 
      }); 
 
    $('.close').click(function(){ 
 
       $('.video').show(); 
 
      $('.tube').empty(); 
 
     $('.close').hide(); 
 
      });

@import url(http://getbootstrap.com/dist/css/bootstrap.min.css);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 

 
      <img src ="img/beme.png" class ="logo"> 
 
      <a class="navbar-brand" href="#">Navbar</a> 
 
     </div> 
 

 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <form class="navbar-form navbar-right"> 
 
      <div class="form-group"> 
 
       <input type="text" placeholder="Email" class="form-control"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="password" placeholder="Password" class="form-control"> 
 
      </div> 
 
      <button type="submit" class="btn btn-success">Sign in</button> 
 
      <button type="submit" class="btn btn-success">Register</button> 
 
      </form> 
 
     </div><!--/.navbar-collapse --> 
 
     </div> 
 
    </nav> 
 

 
<div class ="banner"> 
 
    <div class ="row" id ="mid-row"> 
 
      <img src ="img/background.png" id ="big-image"> 
 
      <img src ="img/play-button.png" id ="play"> 
 
    </div> 
 

 

 

 
<div class="video"> 
 
<div class="playbutton">Play</div>  
 
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1"> 
 
    </div> 
 
    <div class="tube"></div> 
 
    <div class="close">Close X</div> 
 

 
</div>