0

したがって、このJavaScript配列には50個のYouTubeビデオIDと、最初の2つのビデオを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>

したがって、基本的には、この配列を循環して次または前の2つのビデオをDOMに書き込む[前へ]ボタンと[次へ]ボタンが必要です。これを行うための最良の方法は何ですか？

4

1 に答える 1

1

すでにグローバルスコープで宣言しているので、インクリメントまたはデクリメントしてDOMに追加するためのvar i関数のみが必要です。DOMがすでにロードされている場合ではiなく、それらをに追加する必要があります。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()します。

編集：毎回2本の動画を追加したいのに気づきました。その場合は、ボタンクリックごとに前の関数と次の関数を2回呼び出すだけです。配列の最後まで読み取ると、1つだけが追加されます。

$('#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 に答える