0

所以我得到了这个包含 50 个 YouTube 视频 ID 的 JavaScript 数组和一个将前两个视频写入 DOM 的 while 循环。如果您想知道反斜杠，则使用 PHP 打印此代码。

<script type="text/javascript">
var videoArr=["id1", "id2", etc.];
var i = 0;
while (i<2) {
document.write(\'<iframe width="400" height="225" src="http://www.youtube.com/embed/  \'+videoArr[i]+\'?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>\');
i++;
}
</script>

所以基本上我需要一个“上一个”和“下一个”按钮来循环遍历这个数组并将下一个或前两个视频写入 DOM。最好的方法是什么？

4

1 回答 1

1

您已经var i在全局范围内声明，现在您只需要增加或减少函数i并将其附加到 DOM。而不是document.write()在 DOM 已经加载时，您应该将它们附加到<body>.

// i is at global scope
var i = 0;
function previousVideo() {
   // Only if you're not already at the beginning of the array
   if (i > 0) {
     i--;
     // You tagged this jQuery, so here's the simpler jQuery solution
     appendVideo(i);
    }
}
function nextVideo() {
  // Only if you're not already at the end of the array
  if (i < videoArr.length - 1) {
     i++;
     appendVideo(i);
  }
}
// Appends a new iframe to the <body>
function appendVideo(i) {
   $("body").append('<iframe width="400" height="225" src="http://www.youtube.com/embed/' + videoArr[i] + '?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>');
}

创建一些新按钮并将功能绑定previousVideo()到nextVideo()它们。

编辑：我只是注意到你想每次附加两个视频。在这种情况下，每次单击按钮只需调用上一个和下一个函数两次。如果你读到数组的末尾，只会添加一个。

$('#yourbutton').click(function() {
  // Get rid of the old ones
  $('body').remove('iframe');
  // And write two new ones.
  previousVideo();
  previousVideo();
});
于 2012-07-03T12:59:55.033 回答