jQuery、多次悬停、优化代码

Question

我创建了一个改变鼠标悬停时背景位置的代码，我对它的工作方式很满意，但我有大约50个可能的位置，这个代码看起来非常繁琐。具有"mouseover“和"mouseout”的行实际上是相同的，只是数字发生了变化。有没有可能简化这段代码，这样就不会一遍又一遍地写同样的东西？

$('.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("mouseout", 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");
});

还有一个问题。我可以在鼠标悬停时设置随机的背景位置，但它应该是120的倍数？

非常感谢您的帮助。

Answer 1

也许你可以声明一个对象来保持类和y位置之间的关系？有点像这样：

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

然后重新编写您的代码，如下所示：

$('.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");
});

当然，这假设有问题的元素只有一个类。

编辑

如果您的元素具有或可能具有多个类，则可以遍历对象成员以检查是哪一个，如下所示：

$('.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);
    }
});

Answer 2

我认为最好的办法是为每个Y位置创建一个带槽的数组(在位置0处放置一个null，因为您没有a.over-0对象)，然后循环遍历它们。(没有经过充分的测试，但想法已经存在)

$('.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);
    }); 
}

如果你想使用随机的Y坐标，试试这个...

$('.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);
    }); 
}