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

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

多个YouTube视频的占位符图片

4 个答案: