jQuery的標籤內容與顯示/隱藏的YouTube視頻

Question

我有一個視頻部分，其設置如下：

一個視頻在默認情況下顯示了頁面加載時

有兩個內容選項卡 - 每選項卡包含視頻縮略圖列表。當您點擊其中一個縮略圖時，默認視頻就會消失，並且被點擊的視頻就會顯示出來。

我使用了我在這裏找到的一些代碼：Flash video still playing on DIV that is removed using jQuery (IE bug) - 刪除視頻並克隆它，因爲我在IE中遇到問題，即使正在加載新視頻，以前的視頻仍在播放。

現在在IE9中，視頻的第一個標籤列不會換出。然而，第二個選項卡列將會。

這是HTML：

<div class="video-holder"> 

    <div id="video17" class="large-video" style="display: none;"> 
    <div class="embed-video">the video</div> 
    </div> 

    <div id="video18" class="large-video" style="display: none;"> 
    <div class="embed-video">the video</div> 
    </div> 

    <div id="video19" class="large-video" style="display: none;"> 
    <div class="embed-video">the video</div> 
    </div> 

    <div id="video20" class="large-video" style="display: none;"> 
    <div class="embed-video">the video</div> 
    </div> 

</div> 

<ul> 
<li><a href="#video-tab1">Tab 1</a></li> 
<li><a href="#video-tab2">Tab 2</a></li> 
</ul> 

<div id="video-tab1"> 
    <a href="#" id="link17" class="video-link">thumbnail</a> 
    <a href="#" id="link18" class="video-link">thumbnail</a> 
</div> 

<div id="video-tab2"> 
    <a href="#" id="link19" class="video-link">thumbnail</a> 
    <a href="#" id="link20" class="video-link">thumbnail</a> 
</div> 

這裏是JS：

jQuery(".large-video").hide(); //hides all the .large-video divs 
jQuery("#video17").show(); // this is the default video to show 

jQuery(".video-link").click(function(e){ 
e.preventDefault(); 
$(".large-video").hide() 
$("#video"+$(this).attr("id").replace("link","")).show();  
var clone = $(".large-video").clone(true); 
$(".large-video").remove(); 
$(".video-holder").html(clone); 
}); 

感謝您的幫助，您可以提供！

Answer 1

這裏是我會做：

$(document).ready(function() { 
$(".large-video").hide(); //hides all the .large-video divs 
$("#video17").show(); // this is the default video to show 
$(".video-link").click(function(){ 
$(".large-video").hide(); 
$("#video"+$(this).attr("id")).show();  
}); 
}); 

，然後你的鏈接應該是：

<div id="video-tab1"> 
    <a href="#" id="17" class="video-link">thumbnail</a> 
    <a href="#" id="18" class="video-link">thumbnail</a> 
</div> 

<div id="video-tab2"> 
    <a href="#" id="19" class="video-link">thumbnail</a> 
    <a href="#" id="20" class="video-link">thumbnail</a> 
</div> 

所以基本上它做什麼是這裏等到文件準備好，那麼它會隱藏所有您的視頻div並顯示您的默認div（＃video17）。然後，當你點擊一個鏈接時，它已經添加了「#video」部分，然後它將id標籤添加到該鏈接，並顯示結果div。因此，具有ID「19」的鏈接變成「＃video19」。我不確定所有的.remove和克隆的東西是什麼，所以我跳過它。

希望這會有所幫助，或者至少讓你朝着正確的方向前進。