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