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和克隆的东西是什么，所以我跳过它。

希望这会有所帮助，或者至少让你朝着正确的方向前进。