由于我是新手JavaScript和jQuery,所以我面临的问题简单的事情。我创建了3个引导程序标签。(i.e. mainstream,substream,delayedstream),在所有选项卡中,我都使用vlc players创建了jQuery,播放器有效完美的我没有面对任何问题。当触发制表符更改事件时(即,当切换到另一个tab时),我正在呼叫jQuery function。那负责创建我的vlc player。这是我为检测tab change event和trigger相应功能而编写的代码:-$("a[data-toggle='tab']").on('shown.bs.tab', function(e){ var target = $(e.target).attr('href'); if(target=="#att_mainstream") { mainvideoObject.mainshow(); } if(target=="#att_substream") { subvideoObject.subshow(); } if(target=="#att_delayedstream") { delayedvideoObject.delayedshow(); }});每当我们切换tabs时,就会调用特定的tab function。这是真正的问题,每当我切换tabs时,vlcplayer的创建就会增加到该特定选项卡。(简要介绍我第一次执行时的问题,默认情况下,在first tab中仅创建一个player,当我访问second或third tab并再次返回first tab时,并在player中又创建了一个first tab,并且每次连续访问该特定tab时,它都会不断增加,并且second和third tab也是如此,它会不断增加一个每次访问)我对这个问题的想法是,可能正在调用player并导致function for every tab change event的额外创建。因此,这是完整代码的JSFiddle。附言player和输出看起来很笨拙,因为它的格式紧密。但是我们可以在浏览器的code选项中观察到问题,即在每个Inspect Element上如何为该特定tab change创建一个额外的播放器。以下是一些快照,可以使您更好地理解问题。1)这是我第一次执行它的时候(仅创建一个播放器)2)在访问其他标签后,即tab或second third,然后再次返回第一个标签。我没有得到真正的问题是什么?任何帮助我都会感激的。提前致谢。 (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 编辑:我以前的建议是自下而上的。但是更好的方法可能是在调用xxxvideoObject.xxxshow()之前检查它是否已经存在: $("a[data-toggle='tab']").on('shown.bs.tab', function(e){ var target = $(e.target).attr('href'); var LastTab = $(e.relatedTarget).attr('href'); if(target=="#att_mainstream") { if($('#mainvideoOverlay').length == 0) { mainvideoObject.mainshow(); }; } if(target=="#att_substream") { if($('#subvideoOverlay').length == 0) { subvideoObject.subshow(); }; } if(target=="#att_delayedstream") { if($('#delayedvideoOverlay').length == 0) { delayedvideoObject.delayedshow(); }; } });您可以使用on hide事件。将以下代码直接添加到您的表演事件处理程序下面:$("a[data-toggle='tab']").on('hide.bs.tab', function(e){ var target = $(e.target).attr('href'); if(target=="#att_mainstream") { $('#mainvideoOverlay').remove(); } if(target=="#att_substream") { $('#subvideoOverlay').remove(); } if(target=="#att_delayedstream") { $('#delayedvideoOverlay').remove(); }}); (adsbygoogle = window.adsbygoogle || []).push({});
10-06 04:50
查看更多