Question

我创建了一个代码，当鼠标悬停时会改变背景的位置，我很高兴它的工作方式，但我有大约50个可能的位置，这段代码看起来非常麻烦。具有“鼠标悬停”和“鼠标悬停”的行几乎相同，只有数字在变化。是否可以简化这段代码，不会一遍又一遍地写同样的东西？

$('.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-Position创建一个带有槽的数组（因为你没有a.over-0对象，所以在位置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);
    }); 
}

Answer 2

也许你可以声明一个包含类和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); } });

jQuery，多个悬停，优化代码

2 个答案: