javascript - 带有 Bootstrap 模板插件的多维数据集组合不起作用

Question

我正在使用 cubeportfolio.js 作为 Bootstrap 模板的一部分。它似乎工作正常，但模板的自定义 .js 部分导致控制台出错。

我用的模板可以看here ，它工作正常。

错误是“未捕获错误:cubeportfolio 已初始化。在再次初始化之前销毁它!”

出于保密原因，我不能发布所有代码，但我调用了底部的 jquery.cubeportfolio.min.js 和下面的自定义 .js。

这是自定义的.js

(function($, window, document, undefined) {
'use strict';

var gridContainer = $('#grid-container'),
    filtersContainer = $('#filters-container'),
    wrap, filtersCallback;


/*********************************
    init cubeportfolio
 *********************************/
gridContainer.cubeportfolio({
    layoutMode: 'grid',
    rewindNav: true,
    scrollByPage: false,
    defaultFilter: '*',
    animationType: 'slideLeft',
    gapHorizontal: 0,
    gapVertical: 0,
    gridAdjustment: 'responsive',
    mediaQueries: [{
        width: 800,
        cols: 3
    }, {
        width: 500,
        cols: 2
    }, {
        width: 320,
        cols: 1
    }],
    caption: 'zoom',
    displayType: 'lazyLoading',
    displayTypeSpeed: 100
});


/*********************************
    add listener for filters
 *********************************/
if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
    wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');

    wrap.on({
        'mouseover.cbp': function() {
            wrap.addClass('cbp-l-filters-dropdownWrap-open');
        },
        'mouseleave.cbp': function() {
            wrap.removeClass('cbp-l-filters-dropdownWrap-open');
        }
    });

    filtersCallback = function(me) {
        wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
        wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
        me.addClass('cbp-filter-item-active');
        wrap.trigger('mouseleave.cbp');
    };
} else {
    filtersCallback = function(me) {
        me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
    };
}

filtersContainer.on('click.cbp', '.cbp-filter-item', function() {
    var me = $(this);

    if (me.hasClass('cbp-filter-item-active')) {
        return;
    }

    // get cubeportfolio data and check if is still animating (reposition) the items.
    if (!$.data(gridContainer[0], 'cubeportfolio').isAnimating) {
        filtersCallback.call(null, me);
    }

    // filter the items
    gridContainer.cubeportfolio('filter', me.data('filter'), function() {});
});


/*********************************
    activate counter for filters
 *********************************/
gridContainer.cubeportfolio('showCounter', filtersContainer.find('.cbp-filter-item'), function() {
    // read from url and change filter active
    var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
        item;
    if (match !== null) {
        item = filtersContainer.find('.cbp-filter-item').filter('[data-filter="' + match[1] + '"]');
        if (item.length) {
            filtersCallback.call(null, item);
        }
    }
});

})(jQuery, window, document);

Answer 1

你必须在初始化之前销毁它:

gridContainer.cubeportfolio('destroy');

/*********************************
    init cubeportfolio
 *********************************/
gridContainer.cubeportfolio({
    layoutMode: 'grid',
    rewindNav: true,
    scrollByPage: false,
    defaultFilter: '*',
    animationType: 'slideLeft',
    gapHorizontal: 0,
    gapVertical: 0,
    gridAdjustment: 'responsive',
    mediaQueries: [{
        width: 800,
        cols: 3
    }, {
        width: 500,
        cols: 2
    }, {
        width: 320,
        cols: 1
    }],
    caption: 'zoom',
    displayType: 'lazyLoading',
    displayTypeSpeed: 100
});

它在其他地方初始化，因此会抛出错误，因为它不知道要处理哪个 cubeportfolio() 实例。