JQuery滑块在第二次单击缩略图时中断

我的视频滑块面板（使用堆叠的iFrame和z-index）一直存在问题，当第二次单击缩略图时，该面板会断开。我到处寻找解决办法，但我被困住了；我尝试过的一切都没有奏效

现场直播的网站是。当你点击一个缩略图时，你会滚动到页面的顶部，新的视频会在顶部淡入，使用z-index。这很好，但是如果再次单击当前选定的缩略图，它将在顶部的主面板中中断

所以我想出的最好的主意，但我正在努力正确实现，就是在点击缩略图后立即用“当前”类标记它。然后，如果再次单击，JQuery函数中的if语句可以防止函数再次运行，从而避免问题。但如何做到这一点呢？我想我已经接近下面被注释掉的行了，但我还不太清楚，我正在努力在点击另一个缩略图时如何重新激活选定缩略图上的单击功能。这可能只是因为我缺乏JQuery专业知识。我确实试过：-/

以下是JQuery代码：

    <script type="text/javascript">
    function selectWsImage(controlElement, fadeSpeed) { // find this thumbnail's image and display it in the content panel
        var targetId = controlElement.attr('data-toggle');
        var $selectedItem = $('#video_gallery_panel li.selected');
        var $targetItem = $(targetId);
            //if (!$targetItem.hasClass('current')) {
                //$targetItem.removeClass('current');
                $selectedItem.removeClass('selected').css('z-index', 2);
                $targetItem.addClass('selected').hide().css('z-index', 3).fadeIn(fadeSpeed, function() {
                    $selectedItem.css('z-index', 1);
                    });
                //$targetItem.addClass('current');
            //}
        }
        wsGalleryFadeInterval = 1000;
        $(document).ready(function(){
            $('#homepage_top_right_panel a').click( function(event) {
                $("html, body").animate({ scrollTop: "180px" });
                event.preventDefault();
                selectWsImage($(this), wsGalleryFadeInterval);
            });
        })
</script>

函数选择wsimage（controlElement，fadeSpeed）{//找到此缩略图的图像并将其显示在内容面板中
var targetId=controlElement.attr（'data-toggle'）；
变量$selectedItem=$（“#视频_画廊_面板li.selected”）；
变量$targetItem=$（targetId）；
//if（！$targetItem.hasClass（'current'））{
//$targetItem.removeClass（“当前”）；
$selectedItem.removeClass（'selected'）.css（'z-index'，2）；
$targetItem.addClass（'selected'）.hide（）.css（'z-index'，3）.fadeIn（fadeSpeed，function（）{
$selectedItem.css（'z-index'，1）；
});
//$targetItem.addClass（“当前”）；
//}
}
wsGalleryFadeInterval=1000；
$（文档）.ready（函数（）{
$（“#主页_顶部_右侧_面板a”）。单击（功能（事件）{
$（“html，body”）.animate（{scrollTop:“180px”}）；
event.preventDefault（）；
选择WSImage（$（此），wsGalleryFadeInterval）；
});
})

…以及HTML的相关摘录（如果需要，请随时查看上述链接的源代码）：

运动图像
运动图形展示卷
我参与过的激动人心的运动图形项目和动画作品的亮点


特效
圣芒戈’；中国的电视广告
圣芒戈'；s的圣诞电视广告“当你失去一切时”



运动图像
任何地方的医生护理
新在线医疗服务的视频动画。我从我的客户那里收到了这段视频，我不得不修改动画中的角色，并无缝地创建和替换一个部分，使动画与他们的业务更加相关



运动图像
运动图形展示卷
特效
圣芒戈’；中国的电视广告
运动图像
任何地方的医生护理

希望有人能帮忙-我知道有很多JQuery专家在那里：-）

---

谢谢，终于解决了。在运行函数的z索引切换之前，只需使用一个位置正确的“if not…”检查当前缩略图是否尚未选中（即具有“selected”类）：

if (!$targetItem.hasClass('selected')) {...}

全部功能现在是：

    function selectWsImage(controlElement, fadeSpeed) { // find this thumbnail's image and display it in the content panel
        var targetId = controlElement.attr('data-toggle');
        var $selectedItem = $('#video_gallery_panel li.selected');
        var $targetItem = $(targetId);
            if (!$targetItem.hasClass('selected')) {
                $selectedItem.removeClass('selected').css('z-index', 2);
                $targetItem.addClass('selected').hide().css('z-index', 3).fadeIn(fadeSpeed, function() {
                    $selectedItem.css('z-index', 1);
                    });
            }
        }
        wsGalleryFadeInterval = 1000;
        $(document).ready(function(){
            $('#homepage_top_right_panel a').click( function(event) {
                $("html, body").animate({ scrollTop: "180px" });
                event.preventDefault();
                selectWsImage($(this), wsGalleryFadeInterval);
            });
        })

---

希望这能为将来有同样问题的人省去一些麻烦。

一个问题是，

选定的

类永远不会从以前选定的元素中删除。无论单击哪个缩略图，第一个元素始终具有选中的

类。不确定修复后是否能解决您的问题，但这是一个很好的开始。谢谢。所以这也是问题的一部分！我愿意接受所有建议和代码示例。
    function selectWsImage(controlElement, fadeSpeed) { // find this thumbnail's image and display it in the content panel
        var targetId = controlElement.attr('data-toggle');
        var $selectedItem = $('#video_gallery_panel li.selected');
        var $targetItem = $(targetId);
            if (!$targetItem.hasClass('selected')) {
                $selectedItem.removeClass('selected').css('z-index', 2);
                $targetItem.addClass('selected').hide().css('z-index', 3).fadeIn(fadeSpeed, function() {
                    $selectedItem.css('z-index', 1);
                    });
            }
        }
        wsGalleryFadeInterval = 1000;
        $(document).ready(function(){
            $('#homepage_top_right_panel a').click( function(event) {
                $("html, body").animate({ scrollTop: "180px" });
                event.preventDefault();
                selectWsImage($(this), wsGalleryFadeInterval);
            });
        })