Использование isotope.js для определения отношения «И» при фильтрации с использованием нескольких параметров. ⇐ CSS

[Anonymous]

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

Я хочу, чтобы это работало так:
[*]Если выбран только один тег тег, результаты отображаются с этим тегом [*]Если выбрано более одного тега тег, отобразите результаты, имеющие любой из этих тегов (оба не обязательно должны существовать вместе на карточке) [*]Если выбран тип, отображаются только результаты, подпадающие под этот тип [*]Если выбран один тип и один тег, отобразить результаты для сообщений, в которых тег существует для выбранного типа [*]Если выбран один тип и несколько тегов, отображаются сообщения, подпадающие под этот тип и имеющие любой из этих тегов. ли> [*]Если выбрано более одного типа и одного или нескольких тегов, то отображаются сообщения, в которых тег существует для любого типа< /ли>
Например, используя мою демонстрацию ниже, вот несколько вариантов использования:
Если я нажму «Видео-демонстрации и туры», я увижу два видеосообщения (карточка 1 и 3) – РАБОТАЕТ [*]Если я нажму «Видео-демонстрации и туры», а затем «Ansible», я увижу только карточку 3 — НЕ РАБОТАЕТ [*]Если я нажму «Блог и новости», я увижу 3 карточки (карточка 2, 4, 5) – РАБОТАЕТ [*]Если я нажму «Блог и новости», а затем «Ansible», я увижу карточки 4 и 5. [*]Если я нажму «Блог и новости», «Ansible», а затем «Автоматизация», я увижу карточки 2, 4 и 5.
Однако в моей текущей демонстрации, хотя журнал консоли и выглядит правильно, он работает не так, как я хотел.

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) { value.push(obj[prop]); } возвращаемое значение. Flat().join(", "); } функция handleFilterClick (событие, фильтры) { вар listItem = событие; вар filterGroup = listItem .closest(".rSidebar__options") .getAttribute("группа-фильтров данных"); var data_filter = listItem.getAttribute("фильтр данных"); if (filterGroup === "тип") { фильтры[filterGroup] = [data_filter]; } еще { if (!filters[filterGroup]) { фильтры[filterGroup] = []; } если (listItem.classList.contains("выбрано")) { фильтры[filterGroup].push(data_filter); } еще { фильтры[группа фильтров] = фильтры[группа фильтров].filter( (тег) => тег !== data_filter ); } } // Объединяем фильтр типа с выбранными фильтрами тегов, используя отношение И вар filterValues ​​= []; // Фильтр типа дескриптора если (фильтры["тип"]) { filterValues.push("." + фильтры["тип"][0]); } // Обработка фильтра тегов, если он определен если (фильтры["тег"]) { var selectedType = фильтры["тип"][0]; фильтры["тег"].forEach((тег) => { filterValues.push("." + selectedType + "." + тег); }); } var FinalFilter = filterValues.join(", "); console.log(finalFilter); iso.arrange({ фильтр: финальный фильтр }); } optionLinks.forEach(функция (optionLink) { optionLink.addEventListener("клик", функция (событие) { событие.preventDefault(); this.classList.toggle("выбрано"); handleFilterClick (это, фильтры); }); }); }); .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 { размер коробки: граница-коробка; ширина: расчет (45 % – 14 пикселей); поле: 14 пикселей 0 18 пикселей 14 пикселей; граница: 2 пикселя, сплошная черная; отступ: 20 пикселей; [*] Фильтровать по тегу

• Ansible
• Автоматизация

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

• Блог и новости
• Видео-демонстрации и туры

Карточка 1
Тип: Видео-демо и тур
Тег: Автоматизация Карточка 2
Тип: Блог и новости
Тег: Автоматизация Карточка 3
Тип: Видео-демо и тур
Теги: Автоматизация, Ansible Карточка 4
Тип: Блог и новости
Тег: Ansible Карточка 5
Тип: Блог и Новости
Теги: Ansible, Автоматизация