jquery - 多个 youtube 视频的占位符图片

Question

通过一些研究，我想出了一种方法来显示我自己的缩略图，该缩略图会在点击 youtube 视频时定位。我遇到的问题是，当单击页面上的另一个视频时，两个缩略图都开始播放，而不仅仅是目标，因为它们共享相同的类。在 jQuery 上，我尝试仅针对正在单击的 .image 使用 this 并使用最近的、父级和兄弟级。我可能只是打错了，但作为一个初学者，我很难弄清楚。

HTML

<div class="youtube" style="display:none;">
  <iframe width="382" height="262" src="" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</div>
<img src="img/example.jpg" width="382" height="262" class="image" />

jQuery

$('.image').click(function() {
  $(this).hide();
  $('.youtube').show().find("iframe").attr("src","videourl?autoplay=1");
});

Answer 1

$('.image').click(function() {
  startvideo = $(this).prev();
  $(this).hide();
  startvideo.show().find("iframe").attr("src","videourl?autoplay=1");
});

这将采用前一个元素，在我们之前<img class=".image">有<div class="youtube">
http://jsfiddle.net/6uhyM/

<img src="path/to/image.jpg" data-videourl="http://www.youtube.com/...">

$('.image').click(function() {
      url = $(this).data("videourl")
      startvideo = $(this).prev();
      $(this).hide();
      startvideo.show().find("iframe").attr("src",url);
    });

Answer 2

这不行吗？

$('.image').click(function() {
  $(this).hide();
  var iframe = $(this).prev().show().find("iframe");
  iframe.attr("src",iframe.data(url));
});

注意：您需要立即<img class="image" />遵循<div class="youtube">.. 就像在您的示例中一样.. 所以多个实例将是：

<div class="youtube" style="display:none;">
   <iframe width="382" height="262" src="" data-url="url-1" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</div>
<img src="img/example.jpg" width="382" height="262" class="image" />

<div class="youtube" style="display:none;">
   <iframe width="382" height="262" src="" data-url="url-2" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</div>
<img src="img/example.jpg" width="382" height="262" class="image" />

<div class="youtube" style="display:none;">
   <iframe width="382" height="262" src="" data-url="url-3" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</div>
<img src="img/example.jpg" width="382" height="262" class="image" />

Answer 3

为什么不继续链接$(this)呢？

$('.image').click(function() {
    $(this)
        .hide()
        .prev()
        .show()
        .find("iframe")
        .attr("src","videourl?autoplay=1");
});

Answer 4

<img id="1" ... class="image" />
<img id="2" ... class="image" />

$('.image').click(function() {
    var ID = $(this).attr('id');
    // Now you know what Video to play etc...
});