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 位置创建一个带有插槽的数组（因为没有 a.over-0 对象，所以在位置 0 处放置一个 null），然后循环遍历它们。 （尚未完全测试，但想法已经存在）

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