我正在使用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调用后,看起来不错:

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

但是在我的第二个ajax调用中,再次实例化lightSlider时,它开始“堆叠”。请注意,垂直方向未对齐的双箭头,以及图片下方索引点的垂直双倍:

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

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

最佳答案

假设您使用的Lightslider版本高于1.1.3,则应该能够.destroy()现有实例,如下所示:

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


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

09-07 22:03