0

OK、コードを使用してビデオの上に写真を重ねます。つまり、ビデオが含まれる 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、誰かが最初の投稿の写真をクリックすると、同じクラスがあるため、2 番目の投稿の画像が消えてしまうことです。

クラスを持つすべての画像が消えるのではなく、その投稿の画像をクリックすると消えるようにする方法はありますか.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 に答える