Изотопный фильтр с флажком или выбор опций с несколькими вариантами выбора ⇐ Jquery
Изотопный фильтр с флажком или выбор опций с несколькими вариантами выбора
Я пытался найти, как создать классическую группу фильтров флажков с помощью моего существующего метода фильтрации данных, но то, что я нашел в Интернете, все они объединены или используют значение и т. д. (https://codepen.io/desandro/pen /JGKyrY или https://codepen.io/desandro/pen/DeGjdQ, например). Конечно, это дало бы некоторое представление о том, как интегрировать мои существующие коды, но я не настолько умен со слишком сложным jQuery. На сайте Изотопа нет возможности поиска (я не нашел).
Моя инициация изотопа и функции для кнопок (больше не использую) и выбора опций фильтрации:
var $grid = $('.grid') $grid.isotope({ LayoutMode: 'fitRows', itemSelector: '.box', stagger: 30, // переходы элементов через 30 мс друг за другом filter: '', // отображается по умолчанию процентПозиция: правда, фитРовс: { //Ширина столбца:'.box', желоб: 20, //isFitWidth: правда }, getSortData: { число: '.number parseInt' } }); $('.grid').isotope('макет'); // сохраняем навигационный фильтр для каждой группы вар navfilters = {}; // ФИЛЬТР С ВЫБРАННЫМИ ОПЦИЯМИ $('.filters-nav').on( 'click', '.navbttn', function() { вар $это = $(это); // получаем групповой ключ вар $bttnGroup = $this.parents('.navgroup'); var fltGroup = $bttnGroup.attr('группа-фильтра-данных'); // устанавливаем фильтр для группы navfilters[ fltGroup] = $this.attr('фильтр данных'); // объединяем фильтры вар navfilterValue = cntValues (navfilters); // устанавливаем фильтр для изотопа $grid.isotope({ фильтр: navfilterValue, анимацияПараметры: { продолжительность: 650, смягчение: 'легкость', stagger: 30, // переходы элементов через 30 мс друг за другом очередь: ложь } }); }); // АКТИВНЫЕ КНОПКИ И ВЫБОР $('.navgroup').each( function( i, bttnGroup ) { вар $bttnGroup = $(bttnGroup); $bttnGroup.on('клик', 'опция', функция() { $bttnGroup.find('.active').removeClass('активный'); $(это).addClass('активный'); }); }); // Сглаживание объекта путем объединения значений функция cntValues(объект) { значение вар = ''; for (var prop в obj) { значение += объект [prop]; } возвращаемое значение; } // НАЖМЕНИЕ КНОПКИ СОРТИРОВКИ $('.filters-nav').on('click', '.sortbttn', function() { var sortValue = $(this).attr('значение сортировки данных'); $grid.isotope({sortBy: sortValue}); }); $('.sortgroup').each( function( i, bttnGroup ) { вар $bttnGroup = $(bttnGroup); $bttnGroup.on('клик', 'кнопка', функция() { $bttnGroup.find('.active').removeClass('активный'); $(это).addClass('активный'); }); }); Моя структура и коды находятся здесь: https://jsfiddle.net/igorlaszlo/1mbvretn/2/
Я хотел бы изменить группу фильтров характеристик с вариантов выбора с одним выбором:
все лес холм montain озеро море панорама или 1) для флажков с несколькими вариантами выбора:
all лес холм montain озеро море панорама или 2) оставить варианты выбора, но с несколькими вариантами выбора, если они существуют.
Я пытался найти, как создать классическую группу фильтров флажков с помощью моего существующего метода фильтрации данных, но то, что я нашел в Интернете, все они объединены или используют значение и т. д. (https://codepen.io/desandro/pen /JGKyrY или https://codepen.io/desandro/pen/DeGjdQ, например). Конечно, это дало бы некоторое представление о том, как интегрировать мои существующие коды, но я не настолько умен со слишком сложным jQuery. На сайте Изотопа нет возможности поиска (я не нашел).
Моя инициация изотопа и функции для кнопок (больше не использую) и выбора опций фильтрации:
var $grid = $('.grid') $grid.isotope({ LayoutMode: 'fitRows', itemSelector: '.box', stagger: 30, // переходы элементов через 30 мс друг за другом filter: '', // отображается по умолчанию процентПозиция: правда, фитРовс: { //Ширина столбца:'.box', желоб: 20, //isFitWidth: правда }, getSortData: { число: '.number parseInt' } }); $('.grid').isotope('макет'); // сохраняем навигационный фильтр для каждой группы вар navfilters = {}; // ФИЛЬТР С ВЫБРАННЫМИ ОПЦИЯМИ $('.filters-nav').on( 'click', '.navbttn', function() { вар $это = $(это); // получаем групповой ключ вар $bttnGroup = $this.parents('.navgroup'); var fltGroup = $bttnGroup.attr('группа-фильтра-данных'); // устанавливаем фильтр для группы navfilters[ fltGroup] = $this.attr('фильтр данных'); // объединяем фильтры вар navfilterValue = cntValues (navfilters); // устанавливаем фильтр для изотопа $grid.isotope({ фильтр: navfilterValue, анимацияПараметры: { продолжительность: 650, смягчение: 'легкость', stagger: 30, // переходы элементов через 30 мс друг за другом очередь: ложь } }); }); // АКТИВНЫЕ КНОПКИ И ВЫБОР $('.navgroup').each( function( i, bttnGroup ) { вар $bttnGroup = $(bttnGroup); $bttnGroup.on('клик', 'опция', функция() { $bttnGroup.find('.active').removeClass('активный'); $(это).addClass('активный'); }); }); // Сглаживание объекта путем объединения значений функция cntValues(объект) { значение вар = ''; for (var prop в obj) { значение += объект [prop]; } возвращаемое значение; } // НАЖМЕНИЕ КНОПКИ СОРТИРОВКИ $('.filters-nav').on('click', '.sortbttn', function() { var sortValue = $(this).attr('значение сортировки данных'); $grid.isotope({sortBy: sortValue}); }); $('.sortgroup').each( function( i, bttnGroup ) { вар $bttnGroup = $(bttnGroup); $bttnGroup.on('клик', 'кнопка', функция() { $bttnGroup.find('.active').removeClass('активный'); $(это).addClass('активный'); }); }); Моя структура и коды находятся здесь: https://jsfiddle.net/igorlaszlo/1mbvretn/2/
Я хотел бы изменить группу фильтров характеристик с вариантов выбора с одним выбором:
все лес холм montain озеро море панорама или 1) для флажков с несколькими вариантами выбора:
all лес холм montain озеро море панорама или 2) оставить варианты выбора, но с несколькими вариантами выбора, если они существуют.
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение