jQueryを使用したクラスのバインド配列

Question

forループを使用して次のjQueryを単純化できますか？

$("#nav li a.h").mouseover(
    function() { 
    if($(".content.h").is(":hidden")) { 
     $(".content.h").fadeIn('fast'); 
    } 
    } 
); 
$("#nav li a.e").mouseover(
    function() { 
    if($(".content.e").is(":hidden")) { 
     $(".content.e").fadeIn('fast'); 
    } 
    } 
); 
$("#nav li a.o").mouseover(
    function() { 
    if($(".content.o").is(":hidden")) { 
     $(".content.o").fadeIn('fast'); 
    } 
    } 
); 

私はこれを試してみましたが、運：それはJavaScriptの変数として解釈されませんので

var pg = ["h","e","o"]; 
for (var i = 0; i < pg.length; i++) { 
    $("#nav li a.pg[i]").mouseover(
     function() { 
     if($(".content.pg[i]").is(":hidden")) { 
      $(".content.pg[i]").fadeIn('fast'); 
     } 
     } 
    ); 
} 

Answer 1

pg[i]内の引用符は、変数として動作しません、あなたは+を使用してセレクタ文字列にそれを追加する必要があります。

より最適化：私は基本的に掲載

$.each(["h","e","o"], function(i, id) { 
    $("#nav li a."+id).mouseover(function() { 
     $(".content."+id+":hidden").fadeIn('fast'); 
    }); 
}); 

Answer 2

は、文字列にpg[i]を追加しません。代わりに、これを使用する：

var pg = ["h", "e", "o"] 
for(var i=0; i<pg.length; i++){ 
    (function(current){ 
     $("#nav li a."+current).mouseover(
      function() { 
       if($(".content."+current).is(":hidden")) { 
        $(".content."+current).fadeIn('fast'); 
       } 
      } 
     ); 
    })(pg[i]) 
}