jQuery，多次懸停，優化代碼

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位置之間？ 像這樣的位：

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

然後rewite你這樣的代碼：

$('.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放置一個空值），然後循環遍歷它們。 （不完全測試，但這個想法是有）

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