如何检测jQuery lightslider是否已被实例化，以及如何清除实例 [英] How can I detect if jQuery lightslider has been instantiated, and how to clear instance if yes

问题描述

我使用

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

什么可以治疗这是清除lightSlider的第一个实例的一些方法。 >解决方案

假设你使用的是比1.1.3更新版本的lightslider，你应该能够.destroy（）现有的实例，如下所示：

  var slider = $（'＃lightslider'）。lightSlider（）; 
 slider.destroy（）; 
  

为了安全起见，您需要在调用destroy方法之前检查滑块！ / p>

I'm using JQuery lightSlider. It works pretty well (well, actually, I had to jig the code a little bit, but enough of that for now).

What I am trying to achieve is to dynamically replace the lightSlider content with ajax return data, and this I can do.

With each new data set, I call the lightSlider plugin again. This is the "success" or "done" section of my ajax function:

        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
        });

I call lightSlider again, with each new ajax call, because calling lightSlider only once doesn't seem to work. Maybe it's because the content is dynamically created after the DOM is loaded? Anyway, what I would like to do is clear the lightSlider function after each ajax call, because I think they are piling up on each other in the same div.

After one lightSlider call, it looks good:

But on my second ajax call, when lightSlider is instantiated again, it starts to "stack". Notice the doubled-arrows, vertically misaligned, and also the vertically doubling of the index dots below the picture:

What would cure this is some way to clear the first instance of lightSlider.

解决方案

Assuming you are using a newer version of lightslider than 1.1.3 you should be able to .destroy() the existing instance as follows:

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

For safety, you will need to check the slider is something before you call the destroy method though!

这篇关于如何检测jQuery lightslider是否已被实例化，以及如何清除实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！