Мобильная версияЯ использую Isotope.js для фильтрации, которая включает в себя кнопки и панель поиска. Я знаю, что комбинированные фильтры могут работать в Isotope, потому что этот Codepen демонстрирует его рабочую демонстрацию.
Однако адаптация вышеизложенного к моему варианту использования, похоже, не работает.
Посмотрите мою демонстрацию здесь:
document.addEventListener('DOMContentLoaded', function() { // сохраняем фильтр для каждой группы вар buttonFilters = {}; вар кнопкаФильтр; // регулярное выражение быстрого поиска вар qsRegex; вар контейнер = document.querySelector('.grid'); vargridItems =Container.querySelectorAll('.grid-item'); var searchInput = document.querySelector('.rSidebar__search'); var resourcesCards = document.querySelectorAll(".resourceCard"); /* * инициализировать изотоп */ var iso = новый изотоп (контейнер, { itemSelector: '.resourceCard', LayoutMode: 'fitRows', переходДлительность: '0,5 с', // фильтр: функция( itemElem ) { // возвращаем qsRegex? itemElem.textContent.match(qsRegex): правда; // }, фильтр: функция (itemElem) { вар элемент = это; вар $item = элемент; вар textContent = $item.textContent; // Проверяем, определен ли textContent перед вызовом match вар searchResult = qsRegex? itemElem.textContent.match(qsRegex): правда; вар buttonResult = buttonFilter? $item.is(buttonFilter): правда; обратный поискРезультат && кнопкаРезультат; }, }); /* * фильтрация поиска */ // используем значение поля поиска для фильтрации searchInput.addEventListener('keyup', debounce(function () { qsRegex = новый RegExp(searchInput.value, 'gi'); iso.arrange(); }, 200)); // выравнивание объекта путем объединения значений функция concatValues(obj) { значение вар = ''; for (var prop в obj) { значение += объект [prop]; } возвращаемое значение; } // устранение дребезга, чтобы фильтрация не происходила каждую миллисекунду функция debounce( fn, порог ) { вар тайм-аут; порог = порог || 100; функция возврата debounced() { ClearTimeout (тайм-аут); вар аргументы = аргументы; вар _this = это; функция с задержкой() { fn.apply(_this, args); } таймаут = setTimeout(задержка, порог); }; } /* * Создание функций для сортировки карточек изотопов. */ функция сортировкиКарты(){ вар selectedFilters = []; document.querySelectorAll('.selected').forEach(function(selectedItem) { selectedFilters.push(selectedItem.getAttribute('фильтр данных')); }); var selector = selectedFilters.join(', '); iso.arrange({фильтр: селектор }); } /* * Выполнение изотопной фильтрации по щелчку мыши. */ const optionLinks = document.querySelectorAll('.rSidebar__options-li'); optionLinks.forEach(function(optionLink) { optionLink.addEventListener('click', function(event) { событие.preventDefault(); console.log(событие); this.classList.toggle('выбрано'); сортировкаКарты(); // Плавно прокрутите элемент #all-posts к началу const allPostsElement = document.getElementById('all-posts'); если (allPostsElement) { allPostsElement.scrollIntoView({поведение: 'гладкий'}); } }); }); iso.layout(); /* еще один тест */ // var optionLinks2 = document.querySelectorAll('.rSidebar__options-li'); // // // Добавляем прослушиватель событий клика в элемент 'filters' // optionLinks2.forEach(function(optionLink2) { // optionLink2.addEventListener('click', function(event) { // // // вар цель = event.target; // // console.log(цель); // // // Проверяем, имеет ли выбранный элемент класс button // if (target.classList.contains('buttonTemp')) { // var buttonGroup = target.closest('.button-group'); // console.log("buttonGroup " + buttonGroup); // var filterGroup = buttonGroup.getAttribute('data-filter-group'); // console.log("filterGroup " + filterGroup); // var dataFilter = target.getAttribute('data-filter'); // console.log("dataFilter " + dataFilter); // // // Устанавливаем фильтр для группы // buttonFilters[filterGroup] = dataFilter; // // // Объединить фильтры // var buttonFilter = concatValues(buttonFilters); // // // Расположение изотопов // iso.layout(); // // // // } // }); // }); /* * конец */ }); .container { отступ: 100 пикселей 0; } .rSidebar__options { отступ слева: 0; } .rSidebar__options-li { поле внизу: 17 пикселей; дисплей: гибкий; выровнять-элементы: по центру; курсор: указатель; ширина: -webkit-fit-content; ширина: -moz-fit-content; ширина: подходящее содержимое; } .rSidebar__options-li.selected .rSidebar__options-square { цвет фона: синий; } .rSidebar__options-square { высота: 20 пикселей; ширина: 20 пикселей; граница: 2 пикселя, сплошная черная; } .rSidebar__options-label { поле слева: 10 пикселей; } .resourceCard { граница: 2 пикселя, сплошная черная; [*]
- Блог и Новости
- Примеры использования
В приведенном выше примере выполните следующие действия, чтобы воссоздать проблему(ы):
[*]При запуске демо-версии найдите «новости», и она будет отфильтрована по новостному сообщению (работает) [*]Перезапустите демонстрацию и установите любой из флажков. Карточки будут отсортированы соответствующим образом (работает). [*]Запустите демо-версию повторно, установите оба флажка и найдите «новости». При этом карточки не будут фильтроваться (не работает) для отображения новости. [*]Аналогично вышеописанному: когда флажок установлен и вы ищете несуществующий термин (например, «тест»), он не скрывает все карточки (это означает, что по данному запросу не найдено никаких результатов). срок).
Меня это озадачило, поскольку я пытался следовать демонстрации и изменить свой код, но не могу понять, в чем заключается моя проблема?
