JQuery懸停只適用於最後一個元素？

我使用javaScript和jQuery理解範圍和生命期有點麻煩。我有一個函數，它的自定義對象的數組（GPS是組的陣列）JQuery懸停只適用於最後一個元素？

var currentGroup; 
for(var index = 0, length = gps.length; index < length; ++index) 
{ 
    currentGroup = gps[index]; 
    var newGroup = $('<li id="groupno-' + currentGroup.getID() + '"><span class="group">Group ' + currentGroup.getID() +'</span></li>'); 

    newGroup.hover(
     function() {newGroup.find("span.group").append(GetGroupActionsContainer(currentGroup.getID()));}, 
     function() {newGroup.find("span.group > .GroupActionsContainer").remove();} 
    ); 

    gl.append(newGroup); 
    gl.treeview({ 
     add: newGroup 
    }); 
}

所以這看起來通過GPS和retreives所述currentGroup作爲對象。然後它創建一個新的對象（目前混淆地命名爲newGroup，將其重命名），這是一個持有li的jQuery對象。

gl是頁面上的<ul>。

問題：此功能正確添加新的<li>到gl代表的<ul>表示我的列表顯示所有元素。但懸停只適用於最後一個元素：如果我有2+項目，並將其懸停在其中任何一個上，我會看到最後<li>上由懸停功能創建的圖標。

有沒有人知道這裏會出現什麼問題？我猜，不管怎樣，.hover不適用於該對象，而是適用於某些在遍歷循環時得到更新的引用，但這純粹是猜測。

來源

2009-10-08 Michael Stum

在您的懸停函數中捕獲的newGroup引用循環中創建的最後一個。在懸停函數中使用$（this）來引用懸停元素。

newGroup.hover(
    function() { 
     var $this = $(this); 
     var groupID = $this.attr('id').replace(/groupno-/, ''); 
     $this.find("span.group").append(GetGroupActionsContainer(groupID)); 
    }, 
    function() { $(this).find("span.group > .GroupActionsContainer").remove(); } 
);

來源

2009-10-08 15:57:04 tvanfosson

$（this）did the trick！我現在還有其他一些問題（currentGroup.getID（）也解決了循環中的最後一個項目），但我想我大致瞭解它現在的工作原理。謝謝！ – 2009-10-08 16:11:28

現在我想我明白了。由於懸停函數是一個「函數指針」，因此它在懸停時進行評估，因此內部變量（newGroup和currentGroup.getID（））引用懸停時當前的對象，而不是當前創建的對象。有道理，並希望是正確的:) – 2009-10-08 16:24:24

是的。我已經更新了示例以展示如何直接從li元素獲取組ID。 – tvanfosson 2009-10-08 16:55:11

JQuery懸停只適用於最後一個元素？

回答

相關問題