Я пытаюсь создать фильтр с изотопом в javascript, но мне не повезло переписать jQuery-версию из официального примера
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.color-shape'
});
// store filter for each group
var filters = {};
$('.filters').on( 'change', function( event ) {
var $select = $( event.target );
// get group key
var filterGroup = $select.attr('value-group');
// set filter for group
filters[ filterGroup ] = event.target.value;
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
Мой ванильный код JS
// external js: isotope.pkgd.js, babel-core
// addEventListener Shorthand
function addEvent(element, evnt, funct) {
if (element.attachEvent) {
return element.attachEvent(`on${evnt}`, funct);
}
return element.addEventListener(evnt, funct, false);
}
// flatten object by concatting values
const concatValues = function(obj) {
let value = '';
for (const prop in obj) {
value += obj[prop];
}
return value;
};
const filtersContainer = document.querySelector('.o-filter-container');
const filtersEl = document.querySelector('#filters');
// store filter for each group
const filters = {};
// init Isotope
const iso = new Isotope(filtersContainer, {
itemSelector: '.o-filter-item',
});
addEvent(filtersEl, 'change', function(event) {
const selectEl = event.target;
// get group key
const filterGroup = selectEl.getAttribute('value-group');
// set filter for group
filters[filterGroup] = event.target.value;
// combine filters
const filterValue = concatValues(filters);
// set filter for Isotope
iso.arrange({
filter: () => filterValue,
});
iso.arrange();
});
Я не уверен, что не так с моим кодом. Я потратил некоторое время, чтобы прочитать документы (которые больше сфокусированы на решениях jQuery), форумы и вопросы github и не смог найти никакого ответа. Я заметил, что метод .arrange() эквивалентен .isotope() для jQuery, поэтому вам нужно передать функцию {filter} вместо просто значения.
Так что я надеюсь, что кто-то укажет мне направление, чтобы решить эту двухдневную борьбу!