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

我有一个使用iframe的嵌入式YouTube视频网站。我隐藏了所有这些开始，他们被缩略图图像掩盖。他们需要显示缩略图图像何时点击。jQuery - 隐藏和显示页面上的特定iFrame页面

我有一个工作解决方案，但它需要我为每个iframe /缩略图添加类或ID。我将无法将任何类或ID添加到iframe或缩略图图像。

这是我有：

$(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。

这甚至可能吗？

来源

2015-04-24 Thomas Spade

您可以使用children()到得到相应的iframe

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

来源

2015-04-24 05:20:13

我试着添加这个，但是当我点击缩略图时没有任何反应。所以，你说如果没有添加课程，这是不可能的？ –

这是可能的。检查这个http://jsfiddle.net/2zyxzgsa/1/。你在哪里添加点击事件，以及代码不起作用的HTML结构如何？ –

我刚刚在我的部分结束之前在

添加class他们 -

<iframe class='myclass' ...

，并尝试这一点 -

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

如果您需要添加一些检查，然后 -

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

来源

2015-04-24 05:18:38

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

回答

相关问题