Question

我有x3视频div，其中包含x3播放div。每当我点击任何一个视频div时，有没有办法，所以我点击的视频会触发。这就是我所说的代码：

$（document）.ready（function（）{

$('.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，真的。再次谢谢。

Answer 1

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

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

总是会评估相同的事情（无论你点击哪个元素）

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

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

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

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

$(this).data('video')

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

修改

我可以通过几种方式来解释这一点，但最简单的方法是将数据视频属性放在<div class="play">元素上。

解决此问题的最简单方法是将数据视频属性放在
上

混合模式下的多次单击操作[jQuery]

1 个答案: