时间戳

首页 > 解决方案 > 使用 Isotope 和 Webpack 时过滤器错误

webpack - 使用 Isotope 和 Webpack 时过滤器错误

问题描述

我在 webpack 中使用同位素。正在实例化同位素，但过滤不起作用。这是代码：

var Isotope = require('isotope-layout');

export const Advices = {
    init: function(){
        var $iso = new Isotope( '.advices-list', {
            itemSelector: '.advice-item',
            percentPosition: true,
            layoutMode: 'fitRows',
            filter: '*'
        });
        $('.adv-select').on('click', function(e){
            e.preventDefault(); 
            const $target = $(this).data('target');
            if($target == 'all') {
                $iso.Isotope({ filter: '*' });
            } else {
                $iso.Isotope({ filter: $target });
            }
        });
    }
}

所以，当页面加载时，同位素正在工作，但是当我点击时，我得到了错误：

$iso.Isotope is not a function

我究竟做错了什么 ？谢谢 ！

标签： webpackfilterjquery-isotope

解决方案

分析同位素实例$iso的proto，我没有看到一个叫做isotope的函数，但是我看到了一个叫做arrange的函数，它可以工作！

因此，在 click 函数中，请改用安排（）：

$('.adv-select').on('click', function(e){
    e.preventDefault(); 
    const $target = $(this).data('target');
    if($target == 'all') {
        $iso.arrange({ filter: '*' });
    } else {
        $iso.arrange({ filter: $target });
    }
});

我不知道为什么，但它有效。

推荐阅读