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

Question

возник вопрос, возможно ли скрыть изображение и показать 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?

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

Answer 1

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

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

Answer 2

Что бы я сделал, это поставил якорь (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; }

Answer 3

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

$('.youtube_thumb img').click(function () { $(this).hide().next('iframe').show(); });

Answer 4

$('.youtube_thumb img').click(function()
{
  $(this).css('display','none');
  $('iframe', $(this).parent()).css('display','');
});