jQuery初学者。
这是我正在做的事情。我有一个有10个热点的区域地图。将鼠标悬停在每个热点上,然后移动div的背景(id = dialpad)以显示其他数据(在精灵中)。
我目前使用的代码,但我为每个热点ID都有一个单独的函数。
例如:
$('#dial1')
// On mouse over, move the background on hover
.mouseover(function() {
$('#dialpad').css('backgroundPosition', '0 -120px');
})
// On mouse out, move the background back
.mouseout(function() {
$('#dialpad').css('backgroundPosition', '0 0');
})
$('#dial2')
// On mouse over, move the background on hover
.mouseover(function() {
$('#dialpad').css('backgroundPosition', '0 -240px');
})
// On mouse out, move the background back
.mouseout(function() {
$('#dialpad').css('backgroundPosition', '0 0');
});
...
我想要做的是将该代码合并到一个函数中,我只需从每个区域ID传递垂直偏移图。
有人可以协助吗?
答案 0 :(得分:5)
$('#dial1,#dial2').hover(
function() { changePosition('0 ' + (parseInt(this.id.match(/\d+$/)[0])) * -120 + 'px'); },
function() { changePosition('0 0'); }
);
function changePosition(position) {
$('#dialpad').css('backgroundPosition', position);
}
<强>更新强>
或者,如果页面上的“热点”与索引号的顺序相同,那么您可以采用稍微更有效的方法并为它们提供所有类并使用index
.each()
属性1}}确定正确的索引号。
$('.hotspots').each(function( idx ) {
$(this).hover(
function() { changePosition('0 ' + ((idx + 1) * -120) + 'px'); },
function() { changePosition('0 0'); }
);
});
function changePosition(position) {
$('#dialpad').css('backgroundPosition', position);
}
事实上,如果你不想要它,你真的不需要changePosition()
功能。代码很短,有点重复并不是什么大问题。
$('.hotspots').each(function( idx ) {
$(this).hover(
function() { $('#dialpad').css('backgroundPosition', '0 ' + ((idx + 1) * -120) + 'px')},
function() { $('#dialpad').css('backgroundPosition', '0 0'); }
);
});
答案 1 :(得分:1)
最干净的方法是制作一个快速插件:
(function($){
$.fn.mysprite = function(options){
//merge the provided options with defaults
var o = $.extend($.fn.mysprite.defaults, options||{});
// this is the main body, here we iterate over the set
// returned by the selector applying the new functionality
this.each(function(){
switch(typeof o.target){
case 'object':
case 'string':
var target = $(o.target);
break;
case null:
var target = $(this);
break;
default:
// no target specified!
return this;
}
//simplify your previous code with the hover method
$(this).hover(
function(){
target.css('backgroundPosition', o.offsetIn);
},
function(){
target.css('backgroundPosition', o.offsetOut);
});
});
return this;
};
// setsup class defaults
$.fn.mysprite.defaults = {
offsetIn: '0 0',
offsetOut: '0 0',
target: null
};
})(jQuery);
//invoke with
$('#dialpad1').mysprite({offsetIn: '0 100', offsetOut: '0 0', target: '#dialpad'});
答案 2 :(得分:1)
这是使用闭包/函数生成器进行回调的变体:
function setOffset(offset) {
return (function() { $('#dialpad').css('backgroundPosition', offset); });
}
$('#dial1,#dial2').each(function(i) {
$(this).hover(setOffset('0 -' + (120 * (i+1)) + 'px'), setOffset('0 0'));
});
答案 3 :(得分:0)
function setupDial(selector, offset) {
function resetPos() {
$('#dialpad').css('backgroundPosition', '0 0');
}
function setPos(int p) {
return function() {
$('#dialpad').css('backgroundPosition', '0 ' + p + 'px');
}
}
$(selector)
// On mouse over, move the background on hover
.mouseover(setPos(offset))
// On mouse out, move the background back
.mouseout(resetPos);
}
setupDial('#dial1', -120);
setupDial('#dial2', -240);