jQuery, multiple hover, optimize code

I created a code that changes the position of the background when mouse over, I'm pleased with how it works, but I have about 50 possible positions and this code looks very cumbersome. Rows with "mouseover" and "mouseout" virtually identical, only the numbers changing. Is it possible to simplify this code, that would not write the same thing over and over again?

$('.b-test a').addClass('over-1')

$('.b-test a.over-1').live("mouseover", function(){
    $(this).css("background-position", "0 -120px");
});
$('.b-test a.over-1').live("mouseout", function(){
    $(this).addClass("over-2").removeClass('over-1');
}); 
$('.b-test a.over-2 ').live("mouseover", function(){
    $(this).css("background-position", "0 -240px");
});
$('.b-test a.over-2 ').live("mouseout", function(){
    $(this).addClass("over-3").removeClass('over-2');
});
$('.b-test a.over-3 ').live("mouseover", function(){
    $(this).css("background-position", "0 -360px");
});
$('.b-test a.over-3 ').live("mouse开发者_运维问答out", function(){
    $(this).removeClass('over-3').addClass("over-4");
});
$('.b-test a.over-4 ').live("mouseover", function(){
    $(this).css("background-position", "0 0");
});
$('.b-test a.over-4 ').live("mouseout", function(){
    $(this).removeClass('over-4').addClass("over-1");
});

And one more question. Can I set random background position when mouse hover, but it should be multiple 120?

Many thanks for any help.

Maybe you could declare an object which holds the relation between class and y position? A bit like this:

var positions={
    'over-1': -120,
    'over-2': -240,
    'over-3': -360,
    'over-4': 0
}

and then rewite your code like this:

$('.b-test a').addClass('over-1')

$('.b-test a').live("mouseover", function()
{
    var pos=positions[$(this).attr('class')];
    $(this).css("background-position", "0 "+pos+"px");
});

of course, this assumes that the elements in question only have one class.

Edit

If your elements have or are likely to have more than one class, you could iterate over the objects members to check which one it is, like this:

$('.b-test a').addClass('over-1')

$('.b-test a').live("mouseover", function()
{
    var firstclass='',nextclass=false, classchanged=false;
    for(className in positions)
    {
        if(firstclass=='')
        {
            firstclass=className;
        }
        if($(this).hasClass(className))
        {
            var pos=positions[className];
            $(this).css("background-position", "0 "+pos+"px");
            $(this).removeClass(className);
            nextclass=true;
        }
        else if(nextclass)
        {
            $(this).addClass(className);
            nextclass=false;
            classchanged=true;
        }
    }
    if(!classchanged)
    {
        $(this).addClass(firstclass);
    }
});

I think your best bet is to make an array with a slot for each Y-Position (putting a null in position 0 since you have no a.over-0 object), and loop through them thusly. (Not fully tested, but the idea is there)

$('.b-test a').addClass('over-1');

var items = new Array(null, '-120px', '-240px', '-360px', '0');

for (var x=1; x<items.length; x++){
    var nextItem = (x==items.length-1) ? 1 : x+1;
    $('.b-test a.over-' + x).live("mouseover", function(){
        $(this).css("background-position", '0 ' + items[x]);
    });
    $('.b-test a.over-' + x).live("mouseout", function(){
        $(this).addClass('over-' + nextItem).removeClass('over-' + x);
    }); 
}

If you want to use random Y-Coordinates, try this...

$('.b-test a').addClass('over-1');

var items = new Array('-120px', '-240px', '-360px', '0');

for (var x=1; x<items.length; x++){

    //Find a random spot in the items array and use that as Y-coord
    var currentY = items[Math.floor ( Math.random ( ) * item.length + 1 ) -1];

    var nextItem = (x==items.length-1) ? 1 : x+1;
    $('.b-test a.over-' + x).live("mouseover", function(){
        $(this).css("background-position", '0 ' + currentY ); //<----- change
    });
    $('.b-test a.over-' + x).live("mouseout", function(){
        $(this).addClass('over-' + nextItem).removeClass('over-' + x);
    }); 
}