Фильтр на jquery

Вопрос-ответ JavaScript
1

Добрый день! Есть 2 фильтра по категориям и по тегам, сделаны через data-атрибуты. Вопрос, как их можно связать между собой? Например я выбрал категорию “Аудио” и тег “Управление людьми” оно показало записи с категории аудио с нужным тегом.

Сам jq:

let filter = $("[data-filter]");
let filterTag = $("[data-tag]");
filter.on('click', function () {
    let cat = $(this).data('filter');
    $("[data-cat]").each(function () {
        let itemCat = $(this).data('cat');
        if(cat == 'all') {
            $("[data-cat]").css({'display': 'flex'});
        } else {
            if (itemCat != cat) {
                $(this).css({'display': 'none'});
            } else {
                $(this).css({'display': 'flex'});
            }
        }
    })
})

filterTag.on('click', function () {
    let tag = $(this).data('tag');
    console.log(tag);
    $("[data-tags]").each(function () {
        let itemTag = $(this).data('tags');
        if(tag == 'all') {
            $("[data-tags]").css({'display': 'flex'});
        } else {
            if (itemTag !== tag) {
                $(this).css({'display': 'none'});
            } else {
                $(this).css({'display': 'flex'});
            }
        }
    })
})
2

Задача не вполне понятна, но я попробую предположить, что у тебя есть какой-то список элементов. У них есть атрибуты data-cat и data-tag. Например:

<li data-cat="video" data-tag="bells-n-whistles">Воруй убивай</li>
<li data-cat="audio" data-tag="ppl-mgmnt">Управляй людьми</li>

и у нас есть кнопки-фильтры, по нажатию на которые мы скрываем часть списка. Судя по коду, мы показываем не больше одной категории и одного тега за раз. Дальше все упирается в то, насколько у нас открыт доступ к данным и вообще в то, как рендерится страница.

  1. В идеале у нас данные поступают отдельно и из них мы уже рендерим страницу.
const data = [{
	title: 'Управляй людьми',
	cat: 'audio',
	tags: ['people', 'telepathy, management']
}, {
	title: 'Воруй убивай',
	cat: 'video',
	tags: ['bells', 'whistles']		
}]

let currentCategory = '';
let currentTag = '';

tag.onClick(() => {
	const filteredData = data.filter(el => el.cat === currentCategory && el.tags.includes(currentTag));
	renderPage(filteredData);
});

и, строго говоря, именно под такие ситуации заточены всякие реакты с ангулярами

  1. Если страница уже приходит отрендеренной, но записи сгруппированы, например, по категориям, то можно на каждую категорию обернуть в отдельный контейнер и прятать его целиком, а при изменении тега менять их не на всей странице, а только в нужном контейнере.
<ul class="categories" data-cat=video>
	<li data-tag="people">First</li>
	<li data-tag="animals">Second</li>
</ul>
<ul class="categories" data-cat=audio>
	<li data-tag="people">First</li>
	<li data-tag="animals">Second</li>
</ul>
...
let currentCategory = '';
let tags = ''

category.onClick(() => {
	const newCategory = this.data('cat');
	$(`.categories[data-cat="${currentCategory}"]`).addClass('hidden');
	$(`.categories[data-cat="${newCategory}"]`).removeClass('hidden');
	$(`.categories[data-cat="${newCategory}"]`).find('.tag')... // прятать ненужные, показывать нужные
});

tag.onClick(() => {
	$(`.categories[data-cat="${currentCategory}"]`).find('.tag')... // прятать ненужные, показывать нужные
});
  1. А есть ли вообще разница между категориями и тэгами? Или можно все свести к тегам?
<li class="entry" data-tag="video,bells-n-whistles">Воруй убивай</li>
<li class="entry" data-tag="audio,ppl-mgmnt">Управляй людьми</li>
<li class="entry" data-tag="image,diagram">Красивый график</li>

const tags = [];

tag.onClick(() => {
	const tag = this.data('tag');
	if (tags.includes(tag)) {
		tags.splice(tags.findIndex(el => el === tag), 1);
	} else {
		tags.push(tag);
	}

	$('.entry').forEach(entry => {
		const hasTag = tags.find(t => entry.data('tag').includes(t));
		if (hasTag) {
			entry.removeClass('hidden');
		} else {
			entry.addClass('hidden');
		}
	})
});