javascript - 重新初始化之前如何销毁JQuery插件实例？ (轻扫)

Photoswipe是Vanilla JavaScript灯箱库。我正在使用一个JQuery-fies Photoswipe的简单插件。一切正常，除非当我将新元素动态加载到图库并重新启动Photoswipe插件时，它开始搞砸了事情，即未正确关闭灯箱叠加层。

只需通过执行$（element）.photoswipe（）;即可调用该插件。因此，在第一次加载div元素时调用一次，然后在添加新元素时再次调用它。我已经指出了重新初始化的问题，但是删除了第一个Photoswipe插件调用，并在添加新元素后立即调用了它，一切正常。

我相信错误在于下面的init函数中：如果我们可以在创建数组之前检查Photoswipe的现有实例并杀死它们，则应该解决它。或者我们可以简单地从内存中清除$（element）.photoswipe（）;中的所有内容。创建。那就是我被困住的地方。

这是我正在使用的JQuery Photoswipe插件：

(function($) {
$.fn.photoswipe = function(options){
    var galleries = [],
        _options = options;

    var init = function($this){
        galleries = [];
        $this.each(function(i, gallery){
            galleries.push({
                id: i,
                items: []
            });

            $(gallery).find('a').each(function(k, link) {
                var $link = $(link),
                    size = $link.data('size').split('x');
                if (size.length != 2){
                    throw SyntaxError("Missing data-size attribute.");
                }
                if ($(gallery).data('month')) {
                    $link.data('gallery-id',$(gallery).data('month'));
                } else {
                    $link.data('gallery-id',i+1);
                }

                $link.data('photo-id', k);

                var item = {
                    src: link.href,
                    msrc: link.children[0].getAttribute('src'),
                    w: parseInt(size[0],10),
                    h: parseInt(size[1],10),
                    title: $link.data('title'),
                    author: $link.data('author'),
                    el: link
                }

                galleries[i].items.push(item);

            });

            $(gallery).on('click', 'a', function(e){
                e.preventDefault();
                var gid = $(this).data('gallery-id'),
                    pid = $(this).data('photo-id');
                openGallery(gid,pid);
            });
        });
    }

    var openGallery = function(gid,pid){
        var pswpElement = document.querySelectorAll('.pswp')[0],
            items = galleries[gid-1].items,
            options = {
                history:false,
                index: pid,
                addCaptionHTMLFn: function(item, captionEl, isFake) {
                    if(!item.title) {
                        captionEl.children[0].innerText = '';
                        return false;
                    }
                    captionEl.children[0].innerHTML = item.title + '<br/><small>' + item.author + '</small>';
                    return true;
                },
                showHideOpacity: true
            };
        $.extend(options,_options);
        var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
    }

    // initialize
    init(this);

    return this;
};
}( jQuery ));

最佳答案

我想到了。

每打开一个照相模态，Photoswipe就会加载整个项目数组。因此，添加新元素时需要使用JavaScript的数组推送将新项目附加到数组中。

关于javascript - 重新初始化之前如何销毁JQuery插件实例？ (轻扫)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30892344/