[jQuery] Help optimising jquery code - there must be a better way

[Kent Humphrey]

I am relatively new to jquery, but have managed to muddle my way through a
complicated navigation design that has overlapping selected states, eg with
menu items 1,2,3,4 and 5, when item 2 is selected, the images for items 1
and 3 also have to change.


The code is long and convoluted, and I am sure there is a cleaner way to do
what I am doing. If anyone has any ideas, that would be great.


Here's the code:



// setup before and after classes
$(".current_page_item").next().addClass('after');
$(".current_page_item").prev().addClass('before');
$(".current_page_ancestor").next().addClass('after');
$(".current_page_ancestor").prev().addClass('before');
        
// do overlapping images
$("#primary_nav a").hover(
        function() {
                        
                if ((!$(this).parent().hasClass('current_page_ancestor')) &&
(!$(this).parent().hasClass('current_page_item'))) {
                        $(".current_page_item").next().removeClass('after');
                        $(".current_page_item").prev().removeClass('before');
                        $(".current_page_item").addClass("current_disabled");   
                        $(".current_page_ancestor").next().removeClass('after');
                        
$(".current_page_ancestor").prev().removeClass('before');
                        
$(".current_page_ancestor").addClass("current_disabled");
                }
        },
        function() {
                $(".current_disabled").next().addClass('after');
                $(".current_disabled").prev().addClass('before');
                $(".current_disabled").removeClass("current_disabled");
        }
);
        
$("#page_item_2 a").hover(
        function() {
                $("#page_item_5").addClass('after');
        },
        function() {
                if (!$(this).parent().hasClass('current_page_item')) {
                        $("#page_item_5").removeClass('after');
                }
        }
);
        
$("#page_item_5 a").hover(
        function() {
                $("#page_item_2").addClass('before');
                $("#page_item_7").addClass('after');
        }, 
        function () {
                if ((!$(this).parent().hasClass('current_page_ancestor')) &&
(!$(this).parent().hasClass('current_page_item'))) {
                        $("#page_item_2").removeClass('before');
                        $("#page_item_7").removeClass('after');
                }
        }
);
        
$("#page_item_7 a").hover(
        function() {
                $("#page_item_5").addClass('before');
                $("#page_item_9").addClass('after');
        }, 
        function () {
                if (!$(this).parent().hasClass('current_page_item')) {
                        $("#page_item_5").removeClass('before');
                        $("#page_item_9").removeClass('after');
                }
        }
);
        
$("#page_item_9 a").hover(
        function() {
                $("#page_item_7").addClass('before');
                $("#page_item_11").addClass('after');
        }, 
        function () {
                if (!$(this).parent().hasClass('current_page_item')) {
                        $("#page_item_7").removeClass('before');
                        $("#page_item_11").removeClass('after');
                }
        }
);
        
$("#page_item_11 a").hover(
        function() {
                $("#page_item_9").addClass('before');
        }, 
        function () {
                if (!$(this).parent().hasClass('current_page_item')) {
                        $("#page_item_9").removeClass('before');
                }
        }
);


By way of explanation, this is using the css sprites method where I have a
single image that is all the different states of the nav. The 'before' and
'after' classes are used to indicate the nav items either side of the
selected item. 'current_page_item' and 'current_page_ancestor' are what
WordPress uses to indicate the selected item, or the parent of the selected
item. I am using 'current_disabled' to disable the 'current_page_item'
style, so when you rollover the other nav items they highlight.

If there were some way to combine those if statements, say into a
switch/case statement, that'd be cool. Not sure if there's anything else
that can be done.

-- 
View this message in context: 
http://www.nabble.com/Help-optimising-jquery-code---there-must-be-a-better-way-tp20082703s27240p20082703.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.