Question

所以我有这个充满了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>

所以基本上我需要一个'Previous'和'Next'按钮，它将遍历这个数组并将下一个或前两个视频写入DOM。最好的方法是什么？

Answer 1

您已经在全局范围内声明了var i，现在您只需要增加或减少i的函数并将其附加到DOM。您已经加载了DOM，而不是document.write()，而应该将它们附加到<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()绑定到它们。

修改：我刚发现你想每次追加两个视频。在这种情况下，只需拨打上一个＆amp;每个按钮点击下一个函数两次。如果您读到数组的末尾，则只会添加一个。

$('#yourbutton').click(function() {
  // Get rid of the old ones
  $('body').remove('iframe');
  // And write two new ones.
  previousVideo();
  previousVideo();
});

循环浏览JS数组onclick并将值写入DOM

1 个答案: