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 code：

<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

＆＃13;

$('.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();
            });

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery没有正确执行

1 个答案: