Question

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

我正在使用的模板here，它正常运行。

错误是＆＃39;未捕获错误：cubeportfolio已初始化。在再次初始化之前销毁它！＆＃39;

出于保密原因，我无法发布所有代码，但我在底部调用了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

你必须在init之前销毁它：

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()实例必须处理。

Answer 2

从错误输出中我非常确定您为同一元素实例化Cube Portfolio两次。

如果要再次实例化该元素上的插件调用，则方法destroy

jQuery('#my-grid').cubeportfolio('destroy');

然后再次实例化的init方法

jQuery('#my-grid').cubeportfolio(options);

如果您需要进一步的帮助，请向我发送一个指向您网站的链接，以检查您的代码。

多维数据集组合与引导模板插件无法正常工作

2 个答案: