Question

我不得不重新发布，因为没有人给我我想要的答案。

当用户点击该视频下方的按钮时，我试图进入，它会在弹出窗口中显示该视频。但是，它仅在每次单击按钮时显示相同的视频。

<html lang="en">
<head>
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title>slider demo</title>
   <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" type="text/css" href="js-image-slider.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


</head>
<body >
 <style>
#myDIV {
    display: none;
}
  .display {
  display: block;
}
.span2:focus ~ .alert {
  display: none;
}
.span3:focus ~ .myDIV {
  display: block;
   padding: 20px;
    background-color: #f44336;
    color: white;
}/*
.alert{display:none;}
*/
.alert {
  display:none;
}
.showdiv{

  display: block;
   padding: 20px;
    background-color: #f44336;
    color: white;
}
#video ~ #myDIV{
  z-index: 1;
}
</style>
</head>
<body>
<div class="col-md-12 display"></div>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<p id ="mydiv"onclick="myFunction()">Try it</p>

<div id="myDIV "><div class="display">
This is my DIV element.
</div>
</div>


<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<div id = "results"></div>
<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
        x.style.color = 'blue';
        x.style.position = 'absolute';
        x.style.top = '20px';
        x.style.left = '100px';
        x.style.background = 'red';


    } else {
        x.style.display = 'none';
    }
}
</script>
<script type="text/javascript">
   $(document.ready(function(){
      $('#select').click(function(){

 $('#myDIV').append('<p>Hello world</p>');
      });


   });)
</script>
<script>
var channelName='ajaxkm';

$(document).ready(function()
{
  $.get("https://www.googleapis.com/youtube/v3/channels",
  {
    part: 'contentDetails',
    forUsername: channelName,
    key: ''},
    function(data)
    {
      $.each(data.items,function(i,item)
      {
      console.log(item);
      pid=item.contentDetails.relatedPlaylists.uploads;
      getVids(pid);
      })


    }
);
function getVids(pid){
    $.get("https://www.googleapis.com/youtube/v3/playlistItems",
  {
    part: 'snippet',
    maxResults: 10,
    playlistId: pid,

    key: ''},
    function(data)
    {
      var output;
      $.each(data.items,function(i,item)
      {
      console.log(item);
      videTitle=item.snippet.title;
      videoId = item.snippet.resourceId.videoId;
      videoDescription = item.snippet.description;
      output2='<div class="col-md-4 display"><iframe src=\"//www.youtube.com/embed/'+videoId+'\"></iframe><br><p id="show">'+videoDescription+'</p><span id ="span3" tabindex ="0"><p id ="select" onclick="myFunction()" > Discription of Video</p></span><p id="myDIV"><iframe id ="video" src =\"//www.youtube.com/embed/'+videoId+'\" ></iframe>'+videoDescription+ '</p></div>';



   //   output='<div class="col-md-4"><iframe id="youtube" src=\"//www.youtube.com/embed/'+videoId+'\"></iframe><p onclick="myFunction()"><span tabindex ="0"> Try it</span></p></div>';
   //   v = '<iframe class ="display" src=\"//www.youtube.com/embed/'+videoId+'\"></iframe>';
      textout= videoDescription;
      //append to results listStyleType
      $('#results').append(output2);
    //  $('#myDIV').append(v);
      $('#text').append(textout);
      })


    }
);
}

});

</script>
</body>
</html>
jquery html css iframe youtube

Answer 1

您是否尝试过呈现按钮，以便在点击时更新视频链接？看起来链接没有在点击时更新，这就是为什么你只看到相同的视频。

类似......

var button = $("<button></button>")
  .text("Add to Watchlist")
  .click(function() {
    getVids(pid)
    render();
  })

以及render（）的内容是生成对youtube的请求的代码。（即.get）

然后添加按钮我会将它附加到div，在你有div线的同一个地方。

$('#myDIV').append(button)

如何让我的div显示所选的youtube api内容？

1 个答案: