Как фильтровать контент по классу и data атрибутам?


#1

Пытаюсь сделать страничку с интересными вакансиями, и вот думаю что можно попробовать сделать что то на подобии классов с названиями вакансии, и выводить только те блоки которые содержат в себе data атрибут который совпадает с названием вакансии, если кто знает, подскажите пожалуйста, как такое можно реализовать?)


#2

Видел недавно пример похожего в чьем то jsfiddle, очень интересно получилось, вот сам пример, внизу опишу для лучшего понимания, что вам нужно будет менять:

$(document).on('click', '#section-method a.get-age', function() {
const toShow = $(this).attr('get-age');
$('#section-method .ped').hide().filter((i, n) => $(n).hasClass(toShow)).show();
$('#section-method a.get-age.active').removeClass('active');
$(this).addClass('active');
});

$(document).on('click', '#section-method a.get-age-all', function() {
if($('#section-method a.get-age').hasClass('active')) {
$(
'#section-method a.get-age').removeClass('active');
}
$(
'#section-method .ped').show();
});

Тут вся фишка в том что в ссылки помещенны так сказать если по вашей проблеме то разные направления работы у которых есть свой класс, а внизу уже идут блоки которые должны содержать сами вакансии, но в классах там должен быть тот атрибут который есть у ссылке, так будет происходить отфильтровование, в js два метода, первый при клике на обычные ссылки, второй при клике на ссылку показать всё, второй метод показывает все элементы, а первый проходится по блокам, ищет совпадение по классу, и если совпадение таки есть то просто доставляет ему класс active и делает его видимым.

<div id="section-method">
<div
class="ages">
<a
href="javascript:;" get-age="age_3_6" class="get-age">до 6
<a
href="javascript:;" get-age="age_7_10" class="get-age">7-10
<a
href="javascript:;" get-age="age_11_16" class="get-age">11-16
<a
href="javascript:;" class="get-age-all">Все

<div
class="ped_holder">
<div
class="ped age_7_10">от 7 до 10
<div
class="ped age_3_6">от 3 до 6

Блок сверху это html, различие в том что тут идет сортировка по разным возрастам, но по анлогии думаю сможете сделать.

.ages {
margin-bottom: 20px;
}