如何正确清理此jQuery代码片段

jquery

2014-02-06 37 views 2 likes

我使用此jQuery代码片段来更改图像的背景位置，当链接悬停时。但是我必须添加更多的选择器，并且它会以这种方式占用很多线条，但我似乎无法找到一种方法来缩小它。可以做到吗？或者玛比有更正确的方法来做这种背景变化？如何正确清理此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>

来源

2014-02-06 Thomas Nielsen

你能分享相关的html吗？ –

是的，刚刚想到的是“缩小”，我实际上是在寻求清理代码。 –

回答

我会像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（），因为您在鼠标离开事件中没有做任何事情，所以您可以注册鼠标中心处理程序

来源

2014-02-06 15:27:06

如何正确清理此jQuery代码片段

回答

相关问题