如何正確清理此jQuery代碼片段

Question

我使用此jQuery代碼片段來更改圖像的背景位置，當鏈接懸停時。但是我必須添加更多的選擇器，並且它會以這種方式佔用很多線條，但我似乎無法找到一種方法來縮小它。可以做到嗎？或者瑪比有更正確的方法來做這種背景變化？

<script type ="text/javascript"> 
jQuery(function(){ 
jQuery(".1-panel").hover(function(){ 
    jQuery(".panel-image").css('background-position','0px -135px'); 
}); 
jQuery(".2-panel").hover(function(){ 
    jQuery(".panel-image").css('background-position','0px 0px'); 
}); 
jQuery(".3-panel").hover(function(){ 
    jQuery(".panel-image").css('background-position','0px -265px'); 
}); 
jQuery(".4-panel").hover(function(){ 
    jQuery(".panel-image").css('background-position','0px -560px'); 
}); 
jQuery(".5-panel").hover(function(){ 
    jQuery(".panel-image").css('background-position','0px -410px'); 
}); 
}); 
</script> 

Answer 1

我會像panel添加一個普通類所有5個元素1-panel, .... 5-panel，還增加一個額外的數據 - *屬性像data-imagebp像

<div class="1-panel panel" data-imagebp="0px -135px">...</div> 
<div class="2-panel panel" data-imagebp="0px 0px">...</div> 
... 
<div class="5-panel panel" data-imagebp="0px -410px">...</div> 

然後

jQuery(function ($) { 
    var $pimage = $(".panel-image"); 
    $(".panel").mouseenter(function() { 
     $pimage.css('background-position', $(this).data('imagebp')); 
    }); 
}); 

注：這裏沒有必要使用hover（），因爲您在鼠標離開事件中沒有做任何事情，所以您可以註冊鼠標中心處理程序