代码之家 › 专栏 › 技术社区 › TARKUS

如何检测jQuery lightslider是否已被实例化,如果是,如何清除实例

ajax css html jquery javascript

TARKUS · 技术社区 · 9 年前

我正在使用 JQuery lightSlider 它工作得很好(实际上,我不得不稍微修改一下代码,但现在已经足够了)。

我试图实现的是用ajax返回数据动态替换lightSlider内容,这我可以做到。

对于每个新的数据集,我再次调用lightSlider插件。这是我的ajax函数的“成功”或“完成”部分:

        var lightsliderstring = "";
        for(i=1;i<thumbsArray.length;i++){
            lightsliderstring     += "<li>\n";
            if( $("#as_feature").val() ){
                lightsliderstring     += "   <h3>" + $("#as_feature").val() + " photo " + i + "</h3>\n";
            }
            lightsliderstring     += "   <img src=\"/" + thumbsArray[i] + "\" />\n";
            lightsliderstring     += "</li>\n";
        }

        $("#lightSlider").html(lightsliderstring);

        $('#lightSlider').lightSlider({
            auto: true,
            gallery: false,
            item: 1,
            loop: true,
            slideMargin: 0,
            thumbItem: 0
        });

每次新的ajax调用,我都会再次调用lightSlider,因为只调用lightSlider一次似乎不起作用。也许是因为内容是在加载DOM之后动态创建的?无论如何,我想做的是在每次ajax调用之后清除lightSlider函数,因为我认为它们在同一个div中堆积在一起。

一次lightSlider调用后,它看起来不错:

但在我的第二次ajax调用中,当lightSlider再次被实例化时,它开始“堆栈”。请注意双箭头、垂直错位以及图片下方索引点的垂直加倍:

解决此问题的方法是清除lightSlider的第一个实例。

2 回复 | 直到 9 年前

VorTechS 9 年前

假设您使用的是比1.1.3更新版本的lightslider,您应该能够按如下方式.destroy()现有实例:

var slider = $('#lightslider').lightSlider();
slider.destroy();

为了安全起见,在调用销毁方法之前,您需要检查滑块是否有问题!

TARKUS 9 年前

这个 $("#lightSlider").empty() 或 $("#lightSlider").html('') 由于某种原因没有工作。每次提交新表单时,lightslider实例都会不断堆积。我不知道为什么。也没有 ("#lightSlider").lightslider().destroy() 方法似乎有效,这可能是因为一些我无法确定的奇怪原因,也许与我操作DOM的方式有关,我不知道。

最终奏效的是将 <ul id="lightSlider">...</ul> 块内的 <div id="carousel-container">...</div> 块然后,每次提交新表单时,我都会用一个 $("#carousel-container").html(''); 然后我动态地重新创建了整个 <ul id=“lightSlider”></ul> 使用新的、更新的内容。下面是工作代码:

        $("#carousel-container").html('');
        var lightsliderstring = "<ul id=\"lightSlider\">";
        for(i=1;i<thumbsArray.length;i++){
            lightsliderstring     += "<li>\n";
            if( $("#as_feature").val() ){
                lightsliderstring     += "   <h3>" + $("#as_feature").val() + " photo " + i + "</h3>\n";
            }
            lightsliderstring     += "   <img src=\"/" + thumbsArray[i] + "\" />\n";
            lightsliderstring     += "</li>\n";
        }
        lightsliderstring += "</ul>\n";

        $("#carousel-container").html(lightsliderstring);

        $('#lightSlider').lightSlider({
            auto: true,
            gallery: false,
            item: 1,
            loop: true,
            slideMargin: 0,
            thumbItem: 0
        });