番号を持つjQuery選択クラス。例えばfoo1、foo2、foo3、foo4

Question

私はdivのリストを選択しようとしています（foo＃）とfadeInをホバーの別のdiv（zxcv＃）。私はjavascriptでvarを割り当てましたが、最終効果はfoo6にのみ表示されますか？あなたがiは、それらの内部6が常にあることを最終的な結果を持っているあなたのコールバック、ループ変数i上で閉じている

<div class="foo1"><div class="zxcv1"></div></div> 
<div class="foo2"><div class="zxcv2"></div></div> 
<div class="foo3"><div class="zxcv3"></div></div> 
<div class="foo4"><div class="zxcv4"></div></div> 
<div class="foo5"><div class="zxcv5"></div></div> 
<div class="foo6"><div class="zxcv6"></div></div> 

<script type="text/javascript"> 
     for (var i = 1; i < 6; i++) { 
     $(".foo"+i).hover(
       function() 
       { 
        $(".zxcv"+i).fadeIn(); 
       }, function() 
       { 
        $(".zxcv"+i).fadeOut(); 
       }); 
     } 
</script> 

Answer 1

（あなたはconsole.logまたはalertでこれをチェックアウトすることができます）。

問題を解決するには、コールバックごとにiの値が設定されていることを確認する必要があります。

for (var i = 1; i < 6; i++) { 
    (function(i) { 
     $(".foo"+i).hover(
       function() 
       { 
        $(".zxcv"+i).fadeIn(); 
       }, function() 
       { 
        $(".zxcv"+i).fadeOut(); 
       }); 
    })(i); 
} 

ノートのカップル：

• ザ・Javascriptの変数はブロックではなく、全体の機能にスコープされていないので、これはあなたが毎回iの現在の値との関数を呼び出す必要があることを意味しますループ状態はi <= 6の代わりにi < 6です - これはバグですか？
• 他の人が既に述べたように、この特定のケースでは、別のセレクタを使用してクロージャの問題を完全に回避できます。最もjQueryのメソッドは、セット内のすべての要素に適用されているので、ループの必要性を取り除く

  $("div[class^='foo']").hover(function() { 
      $(this).find("div[class^='zxcv']").fadeIn(); 
  }, function() { 
      $(this).find("div[class^='zxcv']").fadeOut(); 
  }); 
  

  ：

Answer 2

あなたは「attribute starts with」セレクタを使用することができます。

Answer 3

あなたは（もhereを参照してください）$("[class^='foo']")ですべてを選択することができます。

$("[class^='foo']").hover(
    function() { 
     $(this).find("[class^='zxcv']").fadeIn(); 
    }, function() { 
     $(this).find("[class^='zxcv']").fadeOut(); 
    } 
); 

またmy exampleを参照してください。

Answer 4

てみ使用：n番目の子（）

for (var i = 1; i < 6; i++) { 
    $(".foo:nth-child("+i+")").hover(
      function() 
      { 
       $(this).fadeIn(); 
      }, function() 
      { 
       $(this).fadeOut(); 
      }); 
    }