Javascript 隐藏图像并显示iframe，但在具有多个类的一个div中

有一个问题，是否可以隐藏div内的image并显示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>

我只想在单击image时隐藏此图像并显示iframe，但是对于一个div，正如您所看到的，有多个div具有相同的类，是否可以使用javascript或jquery

---

谢谢大家的帮助

使用jquery quick and dirty：

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

试试这个：

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

---

我要做的是在图像周围放置一个锚（

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

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

.youtube_thumb iframe { display:none; }
.youtube_thumb.active iframe { display:block; }
.youtube_thumb.active a { display: none; }