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，因为你可以看到有多个具有相同类的div，是否可以使用javascript或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

试试这个：

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

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

4 个答案: