javascript - jQueryは複数のホバーのコードを最適化します

javascript jquery map indexing hover

これが私のコードです:

$('.tab_map1 area').hover(function(){
    $('#nav1').find('a').stop().toggleClass('hover', 500);
        return false;
});
$('.tab_map2 area').hover(function(){
    $('#nav2').find('a').stop().toggleClass('hover', 500);
        return false;
});
$('.tab_map3 area').hover(function(){
    $('#nav3').find('a').stop().toggleClass('hover', 500);
        return false;
});
$('.tab_map4 area').hover(function(){
    $('#nav4').find('a').stop().toggleClass('hover', 500);
        return false;
});

... (there's 8 of them)


同じコードを何度も繰り返さないで、どうにかしてそれを最適化したいと思います。 .tab_map1-8と#nav1-8をインデックス値で置き換える機会はありますか?

私は試した:

var n = 8;
$('li.tab_map area').eq(n).hover(function(){
    $('#nav').eq(n).find('a').stop().toggleClass('hover', 500);
        return false;
});


そして:

$("#navibar ul").each(function(index) {
$('.tab_map:eq(' + index + ') area').hover(function(index){
    $('#nav:eq(' + index + ')').find('a').stop().toggleClass('hover', 500);
        return false;
});
});


どちらも機能しません。
答え
これを行う最も簡単な方法は、1〜8の範囲でforループを使用することです。次に、各インデックスのセレクターを作成します。例えば

for (var i = 1; i <= 8; i++) {
  var helper = function (sel, id) {
    $(sel).hover(function() {
      $(id).find('a').stop().toggleClass('hover', 500);
      return false;
    });
  };

  helper('.tab_map' + i + ' area', '#nav' + i);
}
関連記事

javascript - BloggerのレイアウトタグはHTMLではサポートされていません:JavaScriptヘルプが必要です

javascript - ベンダープレフィックスの「requestAnimationFrame」実装の違いは何ですか?

javascript - jquery selectablesで選択されたアイテムIDを取得するにはどうすればよいですか?

javascript - JavaScript関数の引数に特殊文字をエンコードする

javascript - 別のクライアント(新しいタブ)が接続すると、マルチプレイヤーJavaScriptゲームが遅くなるのはなぜですか?

javascript - fillStyle内で直接乱数を生成することはできませんか?

javascript - 多重継承の質問

javascript - jQueryを使用して列の値の総数を集計するにはどうすればよいですか?

javascript - <img>要素を取得して、そのエラーを再評価するにはどうすればよいですか?

javascript - Djangoは組み込みウィジェットをローカライズします