javascript - 如何检测是否已实例化jQuery Lightslider，如果是，如何清除实例

我正在使用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的第一个实例。

最佳答案

假设您使用的Lightslider版本高于1.1.3，则应该能够.destroy（）现有实例，如下所示：

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

为了安全起见，在调用destroy方法之前，您需要检查滑块是否正确！