如何检测 jQuery 灯光滑块是不是已实例化，如果是，如何清除实例

Posted 2023-05-08

【中文标题】如何检测 jQuery 灯光滑块是不是已实例化，如果是，如何清除实例

【英文标题】：How can I detect if jQuery lightslider has been instantiated, and how to clear instance if yes如何检测 jQuery 灯光滑块是否已实例化，如果是，如何清除实例

【发布时间】：2016-07-25 13:07:43

【问题描述】：

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

【参考方案1】：

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

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

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

【讨论】：

两件事：1）我收到错误“lightslider（）...destroy不是一个函数。2）关于如何检查滑块的部分是我想要做的事情之一做。可以通过使用 typeof 滑块来完成吗？

忽略我的第一个错误，那是忽略容器大小写敏感的结果。 ID。现在我没有收到“破坏不是函数”错误，但它似乎没有解决我原来的问题。

我只能假设在这种情况下它不会从文档中清除现有的 HTML。在查看了相关站点上的示例：sachinchoolur.github.io/lightslider/examples.html 后，看起来破坏实际上使您的 元素完好无损。所以看起来你需要先清除 html，也许用 $('#lightslider').empty()

我将<ul id="lightSlider">...</ul> 块嵌套在<div id="carousel-container">...</div> 块中。然后，在每次提交新表单时，我用$("#carousel-container").html(''); 删除了整个#lightSlider 块，然后我用新的更新内容动态地重新创建了整个<ul id="lightSlider">...</ul>。这行得通，而且实际上并没有那么麻烦。 lightSlider 看起来不错，效果很好，很有用，谢谢！

将 lighslider 与 ajax 数据一起使用的最佳方法是在 dom 中保留现有的 ul 元素为空并使用每个 ajax 请求填充数据或创建 lighslider 元素 (ul) 并附加到一个 div ?

【参考方案2】：

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

最终的工作是将<ul id="lightSlider">...</ul> 块嵌套在<div id="carousel-container">...</div> 块中。然后，在每次提交新表单时，我用$("#carousel-container").html(''); 删除了整个#lightSlider 块，然后我用新的更新内容动态地重新创建了整个<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
        );

【讨论】：

初始化lightSlider后有没有看DOM？它在您调用它的元素周围创建 2 个包装器元素 - 清空原始元素的 HTML 会使包装器保持原位。再次调用.lightSlider 然后创建新的包装元素；使用destroy 方法应该清理这些。