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。但是所有列表项都绑定了LAST项单击和悬停功能，即使我尝试使用list元素的id绑定函数，i。 E：

    $("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");      
}

单击并将函数悬停到ul中的每个元素

1 个答案: