javascript - jQuery 没有正确执行

Question

这似乎是一个简单的问题，但一直困扰着我，我无法解决。我目前正在尝试通过单击按钮将 div 替换为 iframe 。尽管这个问题很简单，而且我已经有了正确的答案，但由于某种原因我无法运行它。

首先它给了我:

$ not defined

我知道这是一个关于 jQuery 库没有正确插入到 html 文件中的问题。之后我重新整理了我的库，但它仍然无法正常执行。

我已经准备好之前的大部分主题，其中 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>