이미지를 숨기고 iframe을 표시하지만 여러 개의 클래스로 된 하나의 div에

Question

님이 질문을 던졌습니다. div에있는 이미지를 숨기고 iframe을 표시 할 수 있습니까? 그렇지만이 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가 여러 개있는 것을 볼 수 있습니다. 자바 스크립트 또는 jquery를 사용하는 것이 가능합니까?

도움을 주셔서 감사합니다.

Answer 1

JQuery와 신속하고 더러운 사용 :

$('.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

이 시도 :

이미지 주위 앵커 ( a)을 넣어 내가 할 것

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

Answer 4

.

$(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; }