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

Answer 2

将class添加到他们 -

<iframe class='myclass' ...

试试这个 -

$('.myclass').each(function() {
    $(this).hide();
})

如果您需要添加一些支票，那么 -

$('.myclass').each(function() {
  if (check) {
    $(this).hide();
  }
})

jQuery - 隐藏＆amp;在页面上显示特定的iFrame

2 个答案: