jqueryにおいて配列を繰り返す場合

質問

下記のようなコードをひとつにまとめることはできますか？よろしくおねがいします。

$('#prev').hover(function(){
　$('body').css('right, '-50px');
}, function(){
　$('body').css('right, '0px');
});

$('#next').hover(function(){
　$('body').css('left, '-50px');
}, function(){
　$('body').css('left, '0px');
});

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

このほうがマシですかね。
['prev','right','next','left']をループ処理にすることもできますが。

function the_hover(id, prop){
$("#"+id).hover(function(){
$('body').css(prop, '-50px');
},function(){
$('body').css(prop, '0px');
});
}

the_hover('prev','right');
the_hover('next','left');

回答No.5

fujillin

別案で…
(2種類程度なら直接記述した方がよさそうですが）

var data = [
{ id:"#prev", param0:{ rignt:-50 }, param1:{ right:0 }},
{ id:"#next", param0:{ left:-50 }, param1:{ left:0 }}
];

$.map(data, function(d){
　$(d.id).hover(
　　function(){ $('body').css(d.param0); },
　　function(){ $('body').css(d.param1); }
　);
});

回答No.4

hatimiti

こんなのとか？ 'key'、'val'が冗長ですね。
動作確認はしていません。

$([
{'key':'#prev', 'val':'left'},
{'key':'#next', 'val':'right'}]).each(function(i) {

$(this.key).hover(function(){
$('body').css(this.val, '-50px');
}, function(){
$('body').css(this.val, '0px');
});
});

お礼

お礼が遅くなり、申し訳ありません。完璧です、ありがとうございました!

回答No.2

神崎 渉瑠（@taloo）

>No.1
すみません、そこは見逃していました。

この程度しか思いつきませんでした。
過剰な作り込みはかえって難しくなります。

for( var i=0, list=["prev","right","next","left"]; i<list.length; i+=2 ){
$("#"+list[i]).hover.apply($("#"+list[i]),
(function the_hover(prop){
return [function(){
$('body').css(prop, '-50px');
}, function(){
$('body').css(prop, '0px');
}];
})(list[i+1])
);
}

お礼

お礼が遅くなり、申し訳ありません。完璧です、ありがとうございました!

回答No.1

神崎 渉瑠（@taloo）

jQueryのセレクタはCSSセレクタに準拠しています。

$('#prev, #next') 以下略

補足

ご回答有難うございます。ただ、この場合、変更するcssがleftとrightで異なるので、変数を使って処理できないかと。