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頁面

回答

相關問題