試圖讓jquery懸停在圖像陣列上工作

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實際上存儲在腳本開始的數組中。

上面的代碼工作並出現css框，除了無論我將鼠標懸停在哪裏，只有for循環的最後一次迭代所標識的縮略圖的信息（是正確的單詞？）出現。

我明白爲什麼會發生這種情況（即，當懸停聲明產生時，循環完成，因此'i'將始終設置爲最後一個值），但我無法解決該做什麼關於它。我試圖在第一個div中插入通過id調用獲取元素，但這似乎是淘汰整個腳本。

我很高興將這個腳本完整地發佈在這裏，如果這有幫助，但是我認爲我;我只是用最低的第一個打你所有。

任何想法，我應該在這個標題？

Answer 1

如果更換for循環使用jQuery的$.each()功能應該解決的問題，而不是因爲有什麼魔力$.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()函數調用你有兩個參數，當前的「循環」指數，並從該索引處的數組元素的當前值提供的功能。這意味着在該功能中，您可以使用val（或任何您稱之爲val）的array[i]代替array[i] - 儘管array[i]也可以工作：我已經更改了前幾個，以便您可以看到它會是什麼樣子...