Как объединить несколько фильтров в изотопе JS? ⇐ Jquery

[Гость]

У меня есть две области типов контента, которые содержат уникальные параметры фильтра. Это:
[*]тип [*]тег
Я пытаюсь использовать isotope.js для достижения схемы двойной фильтрации, но он всегда отдает приоритет фильтру, на который нажали последний раз.

См. пример использования здесь (ссылка ниже демо):
[*]Если я нажму «Блог и новости», я увижу две публикации (работы) [*]Если я затем также нажму «PDF», я не увижу сообщений (поскольку не существует сообщений в блоге с классом pdf). Вместо этого он показывает мне публикацию с практическим примером, в которой есть класс pdf. [*]Если я затем также нажму «статья», он снова должен показать мне сообщения, поскольку не существует сообщения с классом статья в формате pdf для блогов и новостей. Но вместо этого показывает мне пост с практическим примером.
Комбинация фильтров не работает.

В документации сказано, что метод arrange() может обрабатывать несколько экземпляров фильтра, но в моем случае он не работает.

Я также пробовал использовать функцию concatValues() для объединения значений (как показано во многих демонстрациях), но она по-прежнему не дает правильных результатов.

См. интерактивную демонстрацию здесь.

document.addEventListener('DOMContentLoaded', function() { вар контейнер = document.querySelector('.grid'); vargridItems =Container.querySelectorAll('.grid-item'); const optionLinks = document.querySelectorAll('.rSidebar__options-li'); var iso = новый изотоп (контейнер, { itemSelector: '.resourceCard', LayoutMode: 'fitRows', переходДлительность: '0,5 с', }); вар фильтры = {}; функция concatValues(obj) { значение вар = ''; for (var prop в obj) { значение += объект [prop]; } возвращаемое значение; } функция handleFilterClick (событие, фильтры, ISO) { вар listItem = event.target; var filterGroup = listItem.closest('.rSidebar__options').getAttribute('data-filter-group'); var filterValue = listItem.getAttribute('фильтр данных'); if (filters[filterGroup] === filterValue) { удалить фильтры[filterGroup]; } еще { фильтры[filterGroup] = filterValue; } // Объединяем фильтры var filterValues ​​= Object.values(filters).join(', '); // var filterValues ​​= concatValues(фильтры); // отладка console.log('Элемент списка:', listItem); console.log('Группа фильтров:', filterGroup); console.log('Значение фильтра:', filterValue); console.log('Объект фильтров:', фильтры); console.log('Значения фильтра:', filterValues); iso.arrange({ filter: filterValues ​​}); } optionLinks.forEach(function(optionLink) { optionLink.addEventListener('click', function(event) { событие.preventDefault(); this.classList.toggle('выбрано'); handleFilterClick (событие, фильтры, ISO); }); }); }); .post { отступ: 100 пикселей; } .rSidebar__box { поле внизу: 30 пикселей; } .rSidebar__options { отступ слева: 0; } .rSidebar__options-li { поле внизу: 17 пикселей; дисплей: гибкий; выровнять-элементы: по центру; курсор: указатель; ширина: подходящее содержимое; } .rSidebar__options-li.selected .rSidebar__options-square { цвет фона: #185A7D; } .rSidebar__options-square { высота: 20 пикселей; ширина: 20 пикселей; переход: все 0,5 секунды легкости; граница: 2 пикселя, сплошная #000000; } .rSidebar__options-label { поле слева: 10 пикселей; } .сетка { дисплей: гибкий; flex-wrap: обертка; поле: -14 пикселей 0 0 -14 пикселей; } .grid-item { размер коробки: граница-коробка; ширина: расчет (33,33% — 14 пикселей); поле: 14 пикселей 0 18 пикселей 14 пикселей; [*] Фильтровать по тегу

• PDF
• Статья

Фильтр по типу

• Блог и Новости
• Примеры использования

Пример использования, публикация в формате PDF Блоги и новости Блоги и новости, публикации статей