随机播放.js复合筛选器和数据组数组

Question

我正在使用shuffle.js来过滤两个单独的数据组。一个组可以接受一个数组。我正在努力在这里获得他们的复合过滤示例，我基于它，以在他们的演示页面演示页面上使用基本过滤。银河系在"空间"和"自然"组中的情况如何。

我的两个组是类别(独占(和位置(可以有多个(。

目前，date-loc 是用data-loc='["carolinas","massachusetts"]'硬编码

的我的应用.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();
}

Answer 1

您应该编辑 itemPassesFilters。

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

到

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