Question

好的我正在使用代码将照片覆盖在视频上方，这意味着，其中包含视频的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的图像消失。

Answer 1

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

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

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

javascript .onclick如何隐藏其他.onclick选项

1 个答案: