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>