Question

使用javaScript和jQuery了解范围和生命周期时遇到一些麻烦。我有一个函数，它接受一组自定义对象（gps是一组数组）

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查看并将currentGroup作为对象进行检索。然后它创建一个新对象（目前容易混淆地命名为newGroup，将其重命名），这是一个持有li的jQuery对象。

gl是页面上的<ul>。

问题：此功能正确地将新<li>添加到gl表示的<ul> - 我的列表显示了所有元素。但悬停仅适用于最后一个元素：如果我有2个以上的项目，并且我将鼠标悬停在其中任何一个上，我会在最后<li>上看到悬停函数创建的图标。

有谁知道这里有什么问题吗？我猜不知道，.hover不适用于对象，而是应用于迭代循环时得到更新的一些引用，但那是纯粹的猜测。

Answer 1

在悬停函数中捕获的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(); }
);

JQuery悬停只适用于最后一个元素？

1 个答案: