无法导入同位素插件---“$(container).isotope 不是函数”答案

【问题标题】：Unable to import isotope plugin---"$(container).isotope is not a function"无法导入同位素插件---“$(container).isotope 不是函数”
【发布时间】：2020-09-23 16:50:23
【问题描述】：

让Metafizzy Isotope 插件工作的运气为零。网络选项卡显示它没有通过。

我安装了isotope-layout 并在我的main-file.js 中需要它，但代码无法识别$(container).isotope。

涂黑的部分是main-file.js的实际名称。

我也在使用 webpack，想知道这是否是问题的一部分，但我不能肯定。

index.js：

// css imports here

import "jquery/dist/jquery.min.js";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

import mainfile from "./SiteAssets/scripts/main-file.js";

main-file.js：

import axios from "axios";
import "@babel/polyfill/dist/polyfill.js";

var isotope = require('isotope-layout'); // Seeing "'isotope' is declared but its value is never read

// var isotope = require('imports-loader?$=jquery!isotope-layout/dist/isotope.pkgd');

// import isotope from "isotope-layout";

let myClass,
    names,
    _token;

export default class {
    constructor() {
        myClass = this;
        myClass.setTokenVar();
        // a few irrelevant things here

        myClass.loadSpecFilter();

    }

     loadSpecFilter() {
        var $grid = $('.keyContactDiv').isotope({
            itemSelector: '.grid-item',
            // layoutMode: 'fitRows',
            getSortData: {
                name: '.spec-name'
            }
        })

        $('#filters').on( 'click', 'button', function() {
            var sortByValue = $(this).attr('data-sort-by');
            $grid.isotope({ sortBy: sortByValue });
        });

        $('.button-group').each( function( i, buttonGroup ) {
            var $buttonGroup = $( buttonGroup );
            $buttonGroup.on( 'click', 'button', function() {
                $buttonGroup.find('.is-checked').removeClass('is-checked');
                $( this ).addClass('is-checked');
            });
        });
     }

}

my-html.html：

<div class="container">
   <div class="filters">
        <div class="btn-group button-group">
            <button type="button" class="btn btn-info filter-item" data-filter="*">Show All</button>
            <button type="button" class="btn btn-info filter-item" data-sort-by="spec-name">A-Z</button>
            <!-- some other buttons here -->
        </div>
    </div>
</div>

最后，我使用 JS 和 jQuery 创建了我想要过滤的 div 元素。这是一个屏幕截图：

Link

【问题讨论】：

标签： javascript jquery npm import jquery-isotope

【解决方案1】：

试试这个：

npm install jquery
npm install jquery-bridget

import $ from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Isotope from 'isotope-layout';

// make Isotope a jQuery plugin
jQueryBridget( 'isotope', Isotope, $ );
// now you can use $().isotope()
$('.grid').isotope({
  // options...
});

或

import $ from "jquery";
import Isotope from "isotope-layout";

var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
          itemSelector: ".all",
          percentPosition: true,
          masonry: {
            columnWidth: ".all"
          }
});
$('.filters ul li').click(function() { // To filter your isotope.
    var data = $(this).attr('data-filter');
    iso.arrange({
       filter: data // All grid items
    });
});

【讨论】：