jquery - 如何正确清理这个 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

我将向所有 5 个元素 1-panel, .... 5-panel 添加一个公共(public)类，如 panel，同时添加一个附加数据-*属性如 data-imagebp like

<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()，因为你在鼠标离开事件中没有做任何事情，所以你可以只注册mouseenter处理程序