单击和悬停功能可用于ul中的每个元素

Question

我正在尝试在ul中创建元素列表，每个元素都具有自己的click和hover函数，但是由于某些原因，所有列表元素都必须绑定到我尝试绑定的最后一个函数。 我已经尝试了很多解决方法，但是它们似乎都能产生相同的效果。 这是我的代码（写的是主意，而不是实际的变量

for ( var i in JSON_object) {
    var li = document.createElement('li');
    $(li).attr("id","listitem" + i.toSting() );
    $(li).text(JSON_object[i]["name"]);
    $(li).hover(function1, function2);
    $(li).click(function3);
    $("ul").append(li);      
}  

这样可以正确显示每个列表项，包括为其提供各自的文本和ID。 但是，即使我尝试使用列表元素的ID来绑定该函数，也就是所有列表项都必须绑定LAST项的单击和悬停功能，即：

    $("listitem" + i.toSting()).hover(function1, function2);
    $("listitem" + i.toSting()).click(function3);

任何帮助，将不胜感激，谢谢。

Answer 1

您提供的代码没有错。

我的猜测是，您的function1() ， function2()和function3()编写不正确，无法引用this指针，因此他们无法辨别是哪个元素导致了该事件，或者那些函数试图使用变量i不能执行此操作因为for循环将结束，并且仅包含i的最后一个值。 如果您公开这些功能的代码，我们可以进一步建议如何更正它们。

我可以建议使用jQuery链对您的代码进行一些简化/优化：

for ( var i in JSON_object) {
    var li = document.createElement('li');
    $(li).attr("id", "listitem" + i)
        .text(JSON_object[i]["name"])
        .hover(function1, function2);
        .click(function3);
        .appendTo("ul");      
}