0

我有 x3 视频 div，其中包含 x3 播放 div。每当我单击任何这些视频 div 时，有什么方法可以触发我单击的视频。这就是我所说的代码：

$(文档).ready(函数 () {

$('.play').click(function () {
    video = '<iframe style="margin-left:130px; margin-bottom:50px;" width="600" height="375" frameborder="0" src="' + $('img').attr('data-video') + '"></iframe>';
    $('.video').replaceWith(video);
});

$('.play2').click(function () {
    video2 = '<iframe style="margin-left:70px;margin-top:50px; margin-bottom:50px;" width="720" height="450" frameborder="0" src="' + $('img').attr('data-video') + '"></iframe>';
    $('.video2').replaceWith(video2);
});

$('.play3').click(function () {
    video3 = '<iframe style="margin-top:50px; margin-bottom:50px;" width="864" height="540" frameborder="0" src="' + $('img').attr('data-video') + '"></iframe>';
    $('.video3').replaceWith(video3);
});

});

问题是：我必须单击它们中的每一个才能触发。我想当我点击其中任何一个来触发时。当我这样做时，遗憾的是总是第一个触发而不是我点击的这个。谢谢！

编辑：这是html代码：

<div class="video">
 <div class="play"><i class="icon-play"> ► </i>
 </div>
   <img src="http://i.imgur.com/9EcjYs8.jpg" data-video="http://www.youtube.com/embed/OgAr66JbvtU?autoplay=1"/>
</div>
<div class="video2">
 <div class="play2"><i class="icon-play"> ► </i>
 </div>
   <img src="http://i.imgur.com/IJAtO44.jpg" data-video="http://www.youtube.com/embed/bg4cdmrUPoQ?autoplay=1"/>
</div>
<div class="video3">
 <div class="play3"><i class="icon-play"> ► </i>
 </div>
   <img src="http://i.imgur.com/zPWy2ME.jpg" data-video="http://www.youtube.com/embed/mjwHO1b_tbE?autoplay=1"/>
</div>

我假设我应该添加一个 img 的 ID，因此每个数据视频可能会分别从 jQuery 触发，但实际上是 idk。再次感谢。

4

1 回答 1

0

问题出在您的 onclick 处理程序中，您有以下代码：

$('img').attr('data-video')

这将始终评估为相同的事物（无论您单击了哪个元素）

我假设你可能想要这样的东西：

$(this).attr('data-video')

这假设.play和是 img 元素.play2。.play3

此外，您可能应该使用 jQuery 的数据 API 并使用它：

$(this).data('video')

如果你打算使用 jQuery，你不妨使用它的所有功能来让你的生活更轻松。

编辑

我可以描述几种方法来解决此问题，但最简单的方法是您只需将 data-video 属性放在<div class="play">元素上。

解决此问题的最简单方法是将 data-video 属性放在

于 2013-10-28T10:57:50.330 回答