скрыть изображение и показать iframe, но в одном div с несколькими классами

есть вопрос, можно ли скрыть изображение и показать iframe, которые находятся внутри div, но чтобы применить эти изменения только в этом div, есть несколько div с одним и тем же классом, например:

<div class="youtube_thumb">
    <img src="http://img.youtube.com/vi/R7JRGQ-UXBU/0.jpg" style="width:325px;border:0;" />
    <iframe width="325" height="250" src="http://www.youtube.com/embed/R7JRGQ-UXBU" frameborder="0" allowfullscreen></iframe>
</div>
<div class="youtube_thumb">
    <img src="http://img.youtube.com/vi/I0RBPgVBTKA/0.jpg" style="width:325px;border:0;" />
    <iframe width="325" height="250" src="http://www.youtube.com/embed/I0RBPgVBTKA" frameborder="0" allowfullscreen></iframe>
</div>

и стиль:

.youtube_thumb iframe { display:none; }

все, что я хочу, это когда я нажимаю на изображение, это скрыть это изображение и показать iframe, но только для одного div, как вы видите, есть несколько div с одним и тем же классом, возможно ли это с помощью javascript или jquery?

Спасибо всем за помощь!


javascript hide jquery youtube show
person user745110    schedule 23.02.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

используя jquery быстро и грязно:

$('.youtube_thumb > img').click(function(){
    var $img = $(this);
    $img.hide();
    $img.next().show();
});
person Andreas    schedule 23.02.2012

arrow_upward
0
arrow_downward

Попробуй это:

$('.youtube_thumb img').click(function () { $(this).hide().next('iframe').show(); });
person Samantha Branham    schedule 23.02.2012

arrow_upward
0
arrow_downward

Я бы поставил якорь (a) вокруг изображения.

$(document).ready(function(){
    $('.youtube_thumb a').click(function(){
        var $self = $(this);
        $self.closest('.youtube_thumb').addClass('active');
    });
});

А потом немного css...

.youtube_thumb iframe { display:none; }
.youtube_thumb.active iframe { display:block; }
.youtube_thumb.active a { display: none; }
person Matthew    schedule 23.02.2012