Как убрать повторяющийся код?

Question

[Maxymus1996]

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';
	});

Можно ли сделать универсальное выражение вместо постоянно повторяющегося кода, где меняется только название фильтра?

Answer 1

[Андрей Седышев]

<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) }
});

https://jsfiddle.net/0ogtxpba/

Comments

[Maxymus1996]

Спасибо! А если на странице будет два и больше блока с фильтрами (.filter__section), как его применять только к конкретному блоку?

https://jsfiddle.net/0ogtxpba/2/

[Андрей Седышев]

Maxymus1996, например так: https://jsfiddle.net/u1tgfeno/

Answer 2

[VoidVolker]

Добавить элементам атрибут data-filter и соответственно в функции filter получать его:

function filter(e){
    var filterValue = $(this).data('filter');
    var item = this;
    $('.item').each(function(){ 
        if(this === item) {
            // Показываем текущий элемент
        } else {
            // Прячем все остальные
        }
    });
}

Comments

[Maxymus1996]

Спасибо, это почти то, что надо. Мне нужно еще чтобы при открытии одной категории все остальные скрывались, можете добавить?

[VoidVolker]

Тогда нужен простой цикл по всем элементам.