jQuery: рефакторинг ленивого кода

Трудно понять, что можно упростить, не понимая, что он делает, но я определенно рекомендовал бы сэкономить на селекторах jquery в качестве переменных, чтобы вам не пришлось платить за чтение DOM более одного раза. Людям часто нравится префиксировать такие переменные с помощью $, чтобы указать, что они являются объектами jquery, но на самом деле это просто предпочтение. Кроме того, никогда не стоит недооценивать важность интервалов.

var categoryFilter = $('.category-filter');
var articleContainer = $('.article-container');

categoryFilter.click(function() {
  var category = $(this).attr('data-category');

  categoryFilter.each(function() {
    if ($(this).attr('data-category').indexOf(category) >= 0) {
      $(this).removeClass('label-default').addClass('label-success').fadeIn('fast');

      $(this).click(function() {
        $(this).removeClass('label-success').addClass('label-default').fadeIn('fast');
        articleContainer.each(function() { $(this).fadeIn('fast') })
        categoryFilter.each(function() { $(this).fadeIn('fast') })
      })
    }
  });

  articleContainer.each(function() {
    if (!($(this).attr('data-categories').indexOf(category) >= 0)) {
      $(this).fadeOut('fast')
    }
  })
});

Правка:

Посмотрев на это немного больше, я вижу пару вещей вы могли бы упростить.

1) как упоминал @dandavis, вы можете создать именованную функцию для ваших вызовов fadeIn('fast').

function fadeFast() {
  $(this).fadeIn('fast');
}

2) вы также можете создать именованную функцию с именем swapClass для обработки ваших removeClass().addClass() случаев.

function swapClass(context, rm, add) {
  return context.removeClass(rm).addClass(add);
}

Затем вызовите его следующим образом:

swapClass($(this), 'label-default', 'label-success').fadeIn('fast');

Но на самом деле кажется, что это должно быть в экземпляре jquery (так как вы должны передать это в качестве контекста), что вы можете сделать следующим образом:

$.fn.swapClass = function(oldClass, newClass) {
  return this.removeClass(oldClass).addClass(newClass);
};

Затем вызовите его, как это:

$(this).swapClass('label-default', 'label-success').fadeIn('fast');

Таким образом, это приводит вас к чему-то вроде:

var categoryFilter = $('.category-filter');
var articleContainer = $('.article-container');

$.fn.swapClass = function(oldClass, newClass) {
  return this.removeClass(oldClass).addClass(newClass);
};

function fadeFast() {
  $(this).fadeIn('fast');
}

categoryFilter.click(function() {
  var category = $(this).attr('data-category');

  categoryFilter.each(function() {
    var $this = $(this);
    if ($this.attr('data-category').indexOf(category) >= 0) {
      $this.swapClass('label-default', 'label-success').fadeIn('fast');

      $this.click(function() {
        $(this).swapClass('label-success', 'label-default').fadeIn('fast');
        articleContainer.each(fadeFast);
        categoryFilter.each(fadeFast);
      })
    }
  });

  articleContainer.each(function() {
    var $this = $(this);
    if (!($this.attr('data-categories').indexOf(category) >= 0)) {
      $this.fadeOut('fast')
    }
  })
});