イメージを非表示にしてiframeを表示しますが、複数のクラスを持つ1つのdiv内に

Question

という質問があります。div内にあるイメージを非表示にしてiframeを表示することはできますか？例えば同じクラス、：

<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を使用することは可能ですか？

ありがとうございました！ jqueryの迅速かつ汚い使っ

Answer 1

：

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

Answer 2

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

Answer 3

はこのお試しください：私はどうなるのか

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

Answer 4

を画像の周りにアンカー（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; }