0

好的，我正在使用代码将照片覆盖在视频上方，这意味着，在有人点击照片之前，其中包含视频的 div 是隐藏的。这是我正在使用的代码。

<img src="http://ericavain.com/wp-content/uploads/2013/02/ravaughn.jpg" alt="ravaughn" width="610" height="390" class="aligncenter image" />
<div class="videobox" style="display:none;">
<iframe width="610" height="390" src="http://www.youtube.com/embed/rpVctT8BuVc" frameborder="0" allowfullscreen></iframe>
</div>

这是脚本

<script>
$(function () {
    $('.image').click(function () {
        $(this).hide();
        $('.videobox').show()
        $('.videobox')[0].play();
    });
});
</script>

我设置该代码的方式是，如果有人单击具有该类的照片，.image则该照片将消失并显示视频。

好的，现在的问题是，如果我在主页上使用该课程有多个帖子.image，并且有人点击了第一个帖子的照片，那么它会使第二个帖子的图像消失，因为它具有相同的课程。

有没有一种方法可以做到这一点，以便当人们单击该帖子的该图像时它会消失，而不是使所有具有该类的图像都.image消失。

4

1 回答 1

1

你能提供更多代码吗？同时你可以试试这个

$(function () {
    $('img').click(function () {
        var video = $(this).next('.videobox');
        $(this).hide();
        video.show()
        video[0].play();
    });
});

这样，您就可以使用.videobox该图像旁边的下一个。一种更简洁的方法是使用该data属性将图像链接到视频，或者将它们放在同一个容器中。

于 2013-02-28T21:48:41.737 回答