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

Question

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

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);
    });