javascript - jQuery - 在页面上隐藏和显示特定的 iFrame

Question

我有一个网站，其中包含多个使用 iframe 的嵌入式 YouTube 视频。一开始我把它们全部隐藏起来，它们被缩略图遮住了。他们需要在单击缩略图时显示。

我有一个可行的解决方案，但它需要我向每个 iframe/缩略图添加类或 ID。我将无法向 iframe 或缩略图图像添加任何类或 ID。

这是我得到的:

$( document ).ready(function() {
<!-- Hide iFrames -->
$(".contentIframe1").hide();
$(".contentIframe2").hide();
    <!-- iFrame1 Click Function -->
    $(".play-thumbnail1").click(function(){
        $(".contentIframe1").show();
    });
    <!-- iFrame2 Click Function -->
    $(".play-thumbnail2").click(function(){
        $(".contentIframe2").show();
    });

});

HTML:

<iframe class="contentIframe1" width="1280" height="720" src="https://www.youtube.com/embedurl" frameborder="0" allowfullscreen></iframe>

  <div class="play-button"></div>
  <img class="play-thumbnail1" src="imgurl" alt="" />

如果不为每个缩略图和iframe添加不同的类，是否可以获得相同的效果？

这是页面上每个 iframe 的新 html:

<iframe width="1280" height="720" src="https://www.youtube.com/embedurl></iframe>

  <div class="play-button"></div>
  <img class="play-thumbnail" src="imgurl" alt="" />

这是新的 jQuery:

$( document ).ready(function() {
<!-- Hide iFrames -->
$("iframe").hide();
    <!-- iFrame Click Function -->
$(".play-thumbnail").click(function(){
$("iframe").show();
});     
});

这当然只是同时隐藏和显示它们。我认为我必须使用 .each() 来遍历每个缩略图并以某种方式使其仅显示相应的 iFrame。

这可能吗？

Answer 1

您可以使用 children() 获取对应的iframe

$(".play-thumbnail").click(function(){
    //if you need to hide currenly visible iframes use $('iframe').hide()
    $(this).closest('div').children("iframe").show();
});