不喜欢 jQuery？我修改了来自http://codepen.io/desandro/pen/btFfG的代码，@Luke 作为对 ESNext/Vanilla 的回答发布了该代码。
我想我会发布这个，因为这是一个相当高的问题。
这里唯一的区别是，您必须自己创建 HTML。
class Metafizzy {
constructor(isotope) {
this.isotope = isotope; // pass Isotope
this.filters = {};
}
run(optionsContainerID, filterDisplayID) {
let options = document.getElementById(optionsContainerID);
let filterDisplay = document.getElementById(filterDisplayID);
// do stuff when checkbox change
options.addEventListener('change', (event) => {
let inputElem = event.target;
this.manageInputElement(inputElem);
let comboFilter = this.getComboFilter(this.filters);
this.isotope.arrange({ filter: comboFilter });
//console.log(comboFilter); // uncomment to see the current filter output
});
}
manageInputElement(inputElem) {
let _this = this;
// get the closest matching parent, and it's attribute value
let parent = inputElem.closest('.iso-option-set');
let group = parent.getAttribute('data-group');
// create array for filter group, if not there yet
let filterGroup = this.filters[group];
if ( ! filterGroup) {
filterGroup = this.filters[group] = [];
}
let isAll = inputElem.classList.contains('iso-all');
// reset filter group if the all box was checked
if (inputElem.type === 'checkbox') {
this.doCheckBoxStuff(inputElem, parent, group, filterGroup, isAll)
} else if (inputElem.type === 'range') {
console.log('is element type "range"')
}
}
doCheckBoxStuff(checkbox, parent, group, filterGroup, isAll) {
if (isAll) {
delete this.filters[group];
if ( ! checkbox.checked) {
checkbox.checked = true;
}
}
// index of
let hasCheckboxValue = filterGroup.includes(checkbox.value);
let index = hasCheckboxValue ? 1 : -1;
if (checkbox.checked) {
let selector = isAll ? 'input' : 'input.iso-all';
let allButton = parent.querySelector(selector);
if (allButton) {
allButton.checked = false;
}
if ( ! isAll && hasCheckboxValue === false) {
// add filter to group
this.filters[group].push(checkbox.value);
}
} else if ( ! isAll) {
// remove filter from group
// gets the index of the property by value
function findWithAttr(array, value) {
for(let i = 0; i < array.length; i += 1) {
if(array[i] === value) {
return i;
}
}
return -1;
}
let startIndex = findWithAttr(this.filters[ group ], checkbox.value)
this.filters[ group ].splice( startIndex, 1 );
// if all boxes unchecked, check the iso-all
if ( ! parent.querySelectorAll('input:not(.iso-all):checked').length) {
parent.querySelector('input.iso-all').checked = true;
}
}
}
getComboFilter(filters) {
let i = 0;
let comboFilters = [];
let message = [];
for (let prop in filters) {
message.push(filters[prop].join(' '));
let filterGroup = filters[prop];
// skip to next filter group if it doesn't have any values
if ( ! filterGroup.length) {
continue;
}
if (i === 0) {
// copy to new array
comboFilters = filterGroup.slice(0);
} else {
let filterSelectors = [];
// copy to fresh array
let groupCombo = comboFilters.slice(0); // [ A, B ]
// merge filter Groups
for (let k = 0, len3 = filterGroup.length; k < len3; k++) {
for (let j = 0, len2 = groupCombo.length; j < len2; j++) {
filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ]
}
}
// apply filter selectors to combo filters for next group
comboFilters = filterSelectors;
}
i++;
}
let comboFilter = comboFilters.join(', ');
return comboFilter;
}
}
这是您实例化它的方式：
<script>
window.onload = function () {
let element = document.getElementById('iso-filter-display');
let iso = new Isotope(element, {
// options
itemSelector: '.iso-display-element'
});
let isoFilter = new Metafizzy(iso);
isoFilter.run('iso-options-container','iso-filter-display')
};
</script>