Filtering classes with jQuery

Question

This code works fine but is way to bulky for my liking. Is there a better way to go about filtering classes and adding a style to them?

 $('.leftNav li a').click(function() {
 $('.leftNav li a').removeClass('active');
 $(this).addClass('active');
 $('span.overlay').css('opacity','0');
 $('ul.thumbnails li').filter('.integrated'), $(function(){ //filter by class
 $('.integrated span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });
 $('.leftNav li a.integrated').click(function(){
 $('.leftNav li a').removeClass('active'); //remove all active classes
 $(this).addClass('active'); //add class active
 $('span.overlay').css('opacity','0'); //hide all active overlays
 $('ul.thumbnails li').filter('.integrated'), $(function(){ //filter by class
 $('.integrated span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });
 $(".leftNav li a.tv").click(function(){
 $('.leftNav li a').removeClass('active'); //remove all active classes
 $(this).addClass('active'); //add class active
 $('span.overlay').css('opacity','0'); //hide all active overlays
 $('ul.thumbnails li').filter('.tv'), $(function(){ //filter by class
 $('.tv span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });
 $(".leftNav li a.print").click(function(){
 $('.leftNav li a').removeClass('active');//remove all active classes
 $(this).addClass('active'); //add class active
 $('span.overlay').css('opacity','0'); //hide all active overlays
 $('ul.thumbnails li').filter('.print'), $(function(){ //filter by class
 $('.print span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });
 $(".leftNav li a.digital").click(function(){
 $('.leftNav li a').removeClass('active');//remove all active classes
 $(this).addClass('active'); //add class active
 $('span.overlay').css('opacity','0'); //hide all active overlays
 $('ul.thumbnails li').filter('.digital'), $(function(){ //filter by class
 $('.digital span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });
 $(".leftNav li a.dm").click(function(){
 $('.leftNav li a').removeClass('active');//remove all active classes
 $(this).addClass('active'); //add class active
 $('span.overlay').css('opacity','0'); //hide all active overlays
 $('ul.thumbnails li').filter('.dm'), $(function(){ //filter by class
 $('.dm span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });
 $(".leftNav li a.events").click(function(){
 $('.leftNav li a').removeClass('active');//remove all active classes
 $(this).addClass('active'); //add class active
 $('span.overlay').css('opacity','0'); //hide all active overlays
 $('ul.thumbnails li').filter('.events'), $(function(){ //filter by class
 $('.events span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });
 $(".leftNav li a.social").click(function(){
 $('.leftNav li a').removeClass('active');//remove all active classes
 $(this).addClass('active'); //add class active
 $('span.overlay').css('opacity','0'); //hide all active overlays
 $('ul.thumbnails li').filter('.social'), $(function(){ //filter by class
 $('.social span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });
 $(".leftNav li a.branding").click(function(){
 $('.leftNav li a').removeClass('active');//remove all active classes
 $(this).addClass('active'); //add class active
 $('span.overlay').css('opacity','0'); //hide all active overlays
 $('ul.thumbnails li').filter('.branding'), $(function(){ //filter by class
 $('.branding span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });

Answer 1

You have a ton of duplicate code. You can easily extract a common function out, and determine what is variable. This will give you something a little more manageable like the following:

var setup = function(filter, overlayFilter){
 $('.leftNav li a' + filter).click(function() {
 $('.leftNav li a').removeClass('active');
 $(this).addClass('active');
 $('span.overlay').css('opacity','0');
 $('ul.thumbnails li').filter(overlayFilter), $(function(){ //filter by class
 $(overlayFilter + ' span.overlay').css('opacity', '0.9'); //fade overlay to 1
 });
 return false; //stops link being followed
 });
};
setup("", ".integrated");
setup(".integrated", ".integrated");
setup(".tv", ".tv");
setup(".print", ".print");
setup(".digital", ".digital");
setup(".dm", ".dm");
setup(".events", ".events");
setup(".social", ".social");
setup(".branding", ".branding");

I'm not saying this is ideal, it's just more manageable. Also, I want to point out that you might have had a bug in your original code, notice that the first call to setup takes an empty string and a ".integrated" filter, whereas every other call to setup takes the same two parameters. Also, I don't guarantee that the revised code matches your code exactly. This is just the first thing I would do; extracting out some common code into a function. You should be able to get the idea.

Fixing a bug in one place is easier than fixing it in nine places.

Answer 2

In my opinion there are two solutions to this thing: First one, if the "semantically important" class is the only one in the tag:

$('.leftNav li a').click(function() {
 $('.leftNav li a').removeClass('active');
 $(this).addClass('active');
 $('span.overlay').css('opacity','0');
 semantics = $(this).getAttribute('class');
 if (category === undefined)
 category = "integrated";
 $('ul.thumbnails li').filter('.'+category ), $(function(){ 
 $('.'+category +' span.overlay').css('opacity', '0.9'); 
 });
 return false; //stops link being followed
 });

Second solution, if you can modify the tags, can be adding a data- element, which you can then access by simply calling data('something'): For example, if you have the tags as

<a href="#" class="something" data-cat="tv"></a>

you can then acces the data-cat attribute by calling

$('.leftNav li a').click(function() {
 $('.leftNav li a').removeClass('active');
 $(this).addClass('active');
 $('span.overlay').css('opacity','0');
 category = $(this).data('cat');
 if (category === undefined)
 category = "integrated";
 $('ul.thumbnails li').filter('.'+category ), $(function(){ 
 $('.'+category +' span.overlay').css('opacity', '0.9'); 
 return false; 
 });