var fActive = '';
function filter(filter){
if(fActive != filter){
$('.filter__item').filter('.'+filter).show();
$('.filter__item').filter(':not(.'+filter+')').hide();
fActive = filter;
}
}
$('.f-1').click(function(){ filter('1'); });
$('.f-2').click(function(){ filter('2'); });
$('.f-3').click(function(){ filter('3'); });
$('.f-4').click(function(){ filter('4'); });
$('.f-5').click(function(){ filter('5'); });
$('.f-all').click(function(){
$('.filter__item').show();
fActive = 'all';
});
<button class="btn-filter" data-filter="foo1">.foo1</button>
<button class="btn-filter" data-filter="foo2">.foo2</button>
<button class="btn-filter" data-filter="foo3">.foo3</button>
<button class="btn-filter" data-filter="all">All</button>$('.btn-filter').on('click', function (e) {
var $el = $(e.target);
var className = $el.data('filter');
if (className) { filter(className) }
});
data-filter и соответственно в функции filter получать его:function filter(e){
var filterValue = $(this).data('filter');
var item = this;
$('.item').each(function(){
if(this === item) {
// Показываем текущий элемент
} else {
// Прячем все остальные
}
});
}