イメージの配列でjquery hoverを動作させようとしています

Question

関数に問題があり、その答えがわかりません。次のように私が書いた機能は次のとおりです。

function display (array) { 
for (i=0, max = array.length; i<max; i++){ 
    var galleryTitle=array[i][3]; 
    var gallerySize=array[i][2]; 
    var galleryDate=array[i][1]; 
    var galleryDescription=array[i][4]; 

    $('#container').append(
     '<div id="'+array[i][0]+'" style="position: absolute; left:'+array[i][6]+'px; top: '+array[i][7]+'px;"><a href="#"><img src=images/'+array[i][5]+'></a></div>' 
    ); 

    $("#"+i).hover( 
     function() { 
      $(this).append('<div id="description"><b>Title: </b>'+galleryTitle+'<br /><b>Images: </b>'+gallerySize+'<br /><b>Date: </b>'+galleryDate+'<br /><br />'+galleryDescription+'</div>'); 
     },  
     function() { 
      $(this).find("div:last").remove(); 
     } 
    ); 
} 
} 

私が何をしようとしているその特定のサムネイルがホバーされるたび、それのサムネイルに関する情報を表示するCSSボックスを起こしています。

サムネイルの情報と実際のURLは、スクリプトの開始時に配列に格納されます。

上記のコードは、以外はと表示されていますが、最後の繰り返しで特定されたサムネイルに関する情報（正しい単語は？）が表示されます。

私はこれがなぜ起こっているのか理解しています（つまり、ループはホバーステートメントが現れるまでに終了し、 'i'は常に最後の値に設定されます）。しかし、それについて。私は最初のdiv内のid呼び出しでget要素を挿入しようとしましたが、これはスクリプト全体をノックアウトするようです。

私はスクリプトを投稿してもらえれば助かりますが、私は思っていました。

私はこれに向かうべきである任意のアイデア？あなたはjQueryの$.each()機能を使用してforループを交換する場合

Answer 1

$.each()について魔法何かがありますので、それは、問題はありません解決する必要がありますが、それはあなたの変数を意味し、別の関数呼び出しgalleryTitleなどで、ループの各反復をカプセル化するという理由だけで別々のクロージャでキャプチャされるため、ループの終了後に正しい値が保持されます。 （クロージャの仕組みがわからない場合は、.hover()に渡す内部関数は、スコープを含む関数が終了した後でも、包含するスコープ内の変数に引き続きアクセスできます。試してみてください：

function display (array) { 
    $.each(array, function(i, val){ 
     var galleryTitle=val[3], 
      gallerySize=val[2], 
      galleryDate=val[1], 
      galleryDescription=val[4]; 

     $('#container').append(
      '<div id="'+array[i][0]+'" style="position: absolute; left:'+array[i][6]+'px; top: '+array[i][7]+'px;"><a href="#"><img src=images/'+array[i][5]+'></a></div>' 
     ); 

     $("#"+i).hover( 
      function() { 
       $(this).append('<div id="description"><b>Title: </b>'+galleryTitle+'<br /><b>Images: </b>'+gallerySize+'<br /><b>Date: </b>'+galleryDate+'<br /><br />'+galleryDescription+'</div>'); 
      },  
      function() { 
       $(this).find("div:last").remove(); 
      } 
     ); 
    }); 
} 

注$.each()機能を使用すると、2つのパラメータ、現在の「ループ」のインデックスとそのインデックスの配列要素から現在の値で提供関数を呼び出すこと。つまり、関数内でarray[i]をval（またはそのパラメータと呼んでいます - 私はそれをvalと呼んでいます）に置き換えることができます。array[i]も動作しますが、最初の部分を変更して、どのように見えるかを確認できます...