Want to improve my jQuery code, does what I want, just too ugly, IMO.

Question

Hi, so I have this jQuery script below that works. But since I'm just learning jQuery, I'd like to take advantage of this working code and make it more terse.

Basically it removes a class which holds a background image, then makes a div visible which is a link to an area of the site. It seems overly repetitive to me. Thanks for the helppp.

THE CODE:

$(document).ready(function(){
    $('#res').live('mouseover',function(){
        $(this).removeClass('resume');
        $('#reslin').css('visibility','visible');   
    });

    $('#res').live('mouseout',function(){
        $(this).addClass('resume');
        $('#reslin').css('visibility','hidden');;   
    });

    $('#pro').live('mouseover',function(){
        $(this).removeClass('projects');
        $('#prolin').css('visibility','visible');
    });

    $('#pro').live('mouseout',function(){
        $(this).addClass('projects');
        $('#prolin').css('visibility','hidden');
    });

    $('#abo').live('mouseover',function(){
        $(this).removeClass('about');
        $('#abolin').css('visibility','visible');
    });

    $('#abo').live('mouseout',function(){
        $(this).addClass('about');
        $('#abolin').css('visibility','hidden');
    });

    $('#con').live('mouseover',function(){
        $(this).removeClass('contact');
        $('#conlin').css('visibility','visible');

    });

    $('#con').live('mouseout',function(){
        $(this).addClass('contact');
        $('#conlin').css('visibility','hidden');
    });
});

Answer 1

Give each of the element groups the same class (i.e. res, pro, abo, con now have class className, and reslin, prolin, abolin, and conlin have class linClassName), then do this:

$(document).ready(function(){
    $('.className').live('mouseover',function(){
        $(this).removeClass('contact');
        $('.linClassName').css('visibility','visible');

    });

    $('.className').live('mouseout',function(){
        $(this).addClass('contact');
        $('.linClassName').css('visibility','hidden');
    });
});

You can also chain the event as suggested by Omar.

Answer 2

Another suggestion is concatenate the event delegation:

$('#res').live('mouseover',function(){
        //code here  
    }).live('mouseout',function(){
        //code here  
    });

Answer 3

Are you sure you want to use visibility style? if it doesn't matter, its better to use .hide() and .show() methods. and also as Matthew said, you can use the same class names for each group of elements. like this:

    $(document).ready(function(){
        $('.group1').live('mouseover',function(){
            $(this).removeClass('resume');
            $('.group2').show();
        }).live('mouseout',function(){
            $(this).addClass('resume');
            $('.group2').hide();
        });
    }

Answer 4

tshauck, here is a efficient solution for your problem without changing any of your existing HTML.

jQuery(document).function($) {

    var myClasses = {
        pro: 'projects',
        res: 'resume',
        abo: 'about',
        con: 'contact'
    }

    $('#res, #pro, #abo, #con').live('mouseenter', function() {
        $('#' + $(this).attr('id') + 'lin')
            .addClass(myClasses[$(this).attr('id')])
            .css('visibility', 'visible');

    }).live('mouseleave', function() {
        $('#' + $(this).attr('id') + 'lin')
            .addClass(myClasses[$(this).attr('id')])
            .css('visibility', 'hidden');
    });

});

Good luck.

Answer 5

Use a className instead of the ids as has already been suggested, and I would also recommend not inlining your functions as you are

$('.className').live('mouseover',function(){
    $(this).removeClass('contact');
    $('.linClassName').css('visibility','visible');

});

would be cleaner as

$('.className').live('mouseover', className_mouseover);
//Any other event subscriptions go here

//Then later, write the functions
function className_mouseover(){
    $(this).removeClass('contact');
    $('.linClassName').css('visibility','visible');

}

It just makes for cleaner easier to follow code when it's not all mashed together