Javascript Shuffle.js复合过滤器和数据组数组

我使用shuffle.js过滤两个独立的数据组。一个组可以接受一个数组。我正在努力获得他们的复合过滤示例，我基于它，在他们的演示页面上使用基本过滤。银河系是如何在“空间”和“自然”两个群体中存在的

我的两个组是category，它是独占的，和location，它可以有多个

目前，日期loc用

数据loc='[“卡罗莱纳州”，“马萨诸塞州”]'硬编码。

My app.js包含以下在元素单击时触发的代码：

function shuffle_dir() {
    'use strict';

    var Shuffle = window.Shuffle;

    var Dir = function(element) {
        this.cats = Array.from(document.querySelectorAll('#dir-department-filter li a'));
        this.locs = Array.from(document.querySelectorAll('#dir-location-filter .btn'));

        this.shuffle = new Shuffle(element, {
            easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
            sizer: '.staff-card',
        });

        this.filters = {
            cats: [],
            locs: [],
        };

        this._bindEventListeners();
    };

    // Bind Event Listeners on Filter Change
    Dir.prototype._bindEventListeners = function() {
        this._onCatChange = this._handleCatChange.bind(this);
        this._onLocChange = this._handleLocChange.bind(this);

        this.cats.forEach( function(a) {
            a.addEventListener('click', this._onCatChange);
        }, this);

        this.locs.forEach( function(btn) {
            btn.addEventListener('click', this._onLocChange);
        }, this);
        // console.log('add Event Listeners');
    };

    // Get Values of Each filter-on button
    Dir.prototype._getCurrentCatFilters = function() {
        return this.cats.filter(function(a) {
            return a.classList.contains('filter-on');
        }).map(function(a) {
            return a.getAttribute('data-dir');
        });
    };

    Dir.prototype._getCurrentLocFilters = function() {
        return this.locs.filter(function(btn) {
            return btn.classList.contains('filter-on');
        }).map(function(btn) {
            return btn.getAttribute('data-loc');
        });
    };

    // Cat or Loc Clicked
    Dir.prototype._handleCatChange = function(e) {
        var anchor = e.currentTarget;

        //only one can be selected
        if( anchor.classList.contains('filter-on') ) {
            anchor.classList.remove('filter-on');
        } else {
            this.cats.forEach( function(a) {
                a.classList.remove('filter-on');
            });

            anchor.classList.add('filter-on');
        }

        this.filters.cats = this._getCurrentCatFilters();
        this.filter();
    };

    Dir.prototype._handleLocChange = function(e) {
        var button = e.currentTarget;

        //only one can be selected
        if( button.classList.contains('filter-on') ) {
            button.classList.remove('filter-on');
        } else {
            this.locs.forEach( function(btn) {
                btn.classList.remove('filter-on');
            });

            button.classList.add('filter-on');
        }

        this.filters.locs = this._getCurrentLocFilters();
        this.filter();
    };

    // Filter based on current state
    Dir.prototype.filter = function() {
        if( this.hasActiveFilters() ) {
            this.shuffle.filter(this.itemPassesFilters.bind(this));
        } else {
            this.shuffle.filter(Shuffle.ALL_ITEMS);
        }
    };

    // If filter arrays have items
    Dir.prototype.hasActiveFilters = function() {
        return Object.keys(this.filters).some(function(key) {
            return this.filters[key].length > 0;
        }, this);
    };

    // Does Element Pass Current Filters
    Dir.prototype.itemPassesFilters = function(element) {
        var cats = this.filters.cats;
        var locs = this.filters.locs;
        var cat = element.getAttribute('data-dir');
        var loc = JSON.parse(element.getAttribute('data-loc'));

        // If active Categories
        if( cats.length > 0 && !cats.includes(cat) ) {
            return false;
        }

        // If active Location
        if( locs.length > 0 && !locs.includes(loc) ) {
            return false;
        }

        return true;
    };

    window.news = new Dir(document.querySelector('.staff-cards-container'));

};
if( $('.staff-cards-container').length > 0 ) {
    shuffle_dir();
}

---

您应该编辑ItemPasseFilters

if( locs.length > 0 && !locs.includes(loc) ) {
    return false;
}

进入

---

我也有同样的问题。你能告诉我你是怎么解决的吗？

if( locs.length > 0 && !loc.includes(locs[0]) ) {
    return false;
}