jQueryが正しく実行されていません

Question

これは少し単純な質問のようですが、それは私を悩ませ続け、私は解決できません。私は現在、divをボタンをクリックするとiframeに置き換えようとしています。この問題の単純な性質と私がすでに正しい答えを持っているにもかかわらず、何らかの理由でそれを実行することはできません。

まず、それは私を与えていた。

を$私はそれが正しくHTMLファイルに挿入されていないjQueryライブラリに関する問題であることを知っている

を定義されていません。その後私はライブラリを改造しても、それでも適切に実行されません。

jQueryが提案されているすべての解決策を使用していないという前のトピックのほとんどを準備しました。私は前の2つの質問に33、もう一方には26の回答をよく知っています。

私はjQueryをファイルにダウンロードしようとしても、それをlocalyに利用しようとしましたが、まだ実行されません。あなたはこれを解決する方法を理解するのを助けてくれますか？

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