Question

当链接悬停时，我正在使用此jQuery代码段来更改图像的背景位置。但我必须添加更多的选择器，它会以这种方式占用很多线，但我似乎无法找到一种方法来缩小它？可以吗？或maby有更正确的方法来改变背景吗？

<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个元素panel添加一个像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（），因为你没有在鼠标离开事件中做任何事情，所以你可以只注册mouseenter处理程序

如何正确清理这个jQuery代码段

1 个答案: