Мобильная версияСкрыть элементы на основе нескольких атрибутов данных ⇐ Jquery
-
Гость
Скрыть элементы на основе нескольких атрибутов данных
У меня есть группа элементов, каждый из которых имеет один или несколько атрибутов данных (в массиве). Над ними находится группа вкладок, каждая из которых имеет атрибут данных, совпадающий с меткой. Когда я нажимаю вкладку, я хотел бы скрыть все элементы, которые не имеют одного и того же атрибута данных. Это было бы легко, если бы каждый элемент имел только один атрибут данных, но у некоторых их несколько, и их необходимо отображать, если они вообще совпадают. Я немного увяз в JS, но чувствую, что уже близко. Кто-нибудь видит, что я делаю не так?
Спасибо
(function($) { $(документ).ready(функция() { $(".main .tabs .tab").click(function() { пусть currentTab; currentTab = $(this).data('депт'); $(".main .tabs .tab").removeClass('активный'); $(this).addClass('активный'); // перебираем все элементы и сопоставляем их с currentTab $(".member-container .member").each(function(i,member) { если (currentTab == 'все') { $(член).removeClass('скрыть'); } еще { $(член).removeClass('скрыть'); letmemberDepts = $(member).data('dept'); $(memberDepts).each(function(j, dept) { if ($(member).data('dept') != dept) { $(член).addClass('скрыть') } }) } }) }) }); })(jQuery); body { маржа: 0; заполнение: 0; размер коробки: граница-коробка; } .tabs { дисплей: гибкий; разрыв столбца: 15 пикселей; отступ сверху: 100 пикселей; оправдание-содержание: центр; } .tabs .tab { отступ: 20 пикселей; граница: 2 пикселя, сплошная зеленая; курсор: указатель; } .tabs .tab.active { цвет фона: зеленый; цвет: #fff; } .member-контейнер { дисплей: гибкий; ширина: 90%; отступ сверху: 100 пикселей; маржа: 0 авто; flex-wrap: обертка; разрыв столбца: 20 пикселей; разрыв между строками: 20 пикселей; } .member-контейнер .member { ширина: 30%; граница: 2 пикселя, сплошная красная; высота: 100 пикселей; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; размер шрифта: 25 пикселей; } .member-container .member.hide { дисплей: нет; Все Финансы Администратор Маркетинг Руководитель Старший Организация Джон Доу Джейн Доу Билли Боб Сьюзи Кью Случайное имя Другое имя Foo Bar Имеет ли это значение?
У меня тоже есть ссылка на codepen: https://codepen.io/paul-molnar/pen/QWzazKq
У меня есть группа элементов, каждый из которых имеет один или несколько атрибутов данных (в массиве). Над ними находится группа вкладок, каждая из которых имеет атрибут данных, совпадающий с меткой. Когда я нажимаю вкладку, я хотел бы скрыть все элементы, которые не имеют одного и того же атрибута данных. Это было бы легко, если бы каждый элемент имел только один атрибут данных, но у некоторых их несколько, и их необходимо отображать, если они вообще совпадают. Я немного увяз в JS, но чувствую, что уже близко. Кто-нибудь видит, что я делаю не так?
Спасибо
(function($) { $(документ).ready(функция() { $(".main .tabs .tab").click(function() { пусть currentTab; currentTab = $(this).data('депт'); $(".main .tabs .tab").removeClass('активный'); $(this).addClass('активный'); // перебираем все элементы и сопоставляем их с currentTab $(".member-container .member").each(function(i,member) { если (currentTab == 'все') { $(член).removeClass('скрыть'); } еще { $(член).removeClass('скрыть'); letmemberDepts = $(member).data('dept'); $(memberDepts).each(function(j, dept) { if ($(member).data('dept') != dept) { $(член).addClass('скрыть') } }) } }) }) }); })(jQuery); body { маржа: 0; заполнение: 0; размер коробки: граница-коробка; } .tabs { дисплей: гибкий; разрыв столбца: 15 пикселей; отступ сверху: 100 пикселей; оправдание-содержание: центр; } .tabs .tab { отступ: 20 пикселей; граница: 2 пикселя, сплошная зеленая; курсор: указатель; } .tabs .tab.active { цвет фона: зеленый; цвет: #fff; } .member-контейнер { дисплей: гибкий; ширина: 90%; отступ сверху: 100 пикселей; маржа: 0 авто; flex-wrap: обертка; разрыв столбца: 20 пикселей; разрыв между строками: 20 пикселей; } .member-контейнер .member { ширина: 30%; граница: 2 пикселя, сплошная красная; высота: 100 пикселей; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; размер шрифта: 25 пикселей; } .member-container .member.hide { дисплей: нет; Все Финансы Администратор Маркетинг Руководитель Старший Организация Джон Доу Джейн Доу Билли Боб Сьюзи Кью Случайное имя Другое имя Foo Bar Имеет ли это значение?
У меня тоже есть ссылка на codepen: https://codepen.io/paul-molnar/pen/QWzazKq
