Филтрация по value в JS?

Question

[Алексей Белов]

Мне нужно реализовать простую фильтрацию, к примеру у меня есть кнопка которая может содержать в себе value имя категории, к примеру Млекопетающие, дальше у меня есть карточки у которых есть названия категорий в value, при нажатии на кнопку все карточки кроме тех у которых есть категория с кнопки получают .hide(), и если я нажимаю другую кнопку то показываются уже другие карточки

Comments

[Алексей Скляров]

А у вас уже есть наработки? Приложите. Иначе это задание, а не вопрос.

[Ihor Bratukh]

MixItUp
Isotope

Answer 1

[Ihor Bratukh]

Логика работы примерно такая:

<div class="controll">
	<button type="button" data-value="all">All</button>
	<button type="button" data-value="books">Books</button>
	<button type="button" data-value="film">Film</button>
	<button type="button" data-value="music">Music</button>
</div>
<div class="box">
	<div class="item" data-value="books">
		Books
	</div>
	<div class="item" data-value="film">
		Film
	</div>
	<div class="item" data-value="music">
		Music
	</div>
	<div class="item" data-value="books">
		Books
	</div>
	<div class="item" data-value="film">
		Film
	</div>
</div>

(function($) {
	'use strict';
	$('button', $('.controll')).on('click', function(event) {
		event.preventDefault();
		var value = $(this).data('value');
		if (value === 'all') {
			$('.item', $('.box')).fadeIn(300);
		} else {
			$('.item[data-value!="'+ value +'"]', $('.box')).hide();
			$('.item[data-value="'+ value +'"]', $('.box')).fadeIn(300);
		}
	});
})(jQuery);

Посмотреть пример на codepen