Question

我动态创建li元素：

<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
[...]
</ul>

li_id是一个返回li id（= 1,2,3 ...）

的数组值

如何将不同的函数绑定到代码中的每个li元素，如下所示：

for (li_id in lids)
{
console.log(li_id);                         
$(li_id).bind('mouseover', function() {
console.log(li_id);
});
}

以上不起作用。如何正确编写？

使用live()代替bind()，它会显示lids数组的最后一个元素的ID，而不是1,2,3 ... [...]，就像console.log()声明之外的$ ...

Answer 1

http://www.mennovanslooten.nl/blog/post/62

或

JavaScript closure inside loops – simple practical example

鉴于您的HTML，代码可以用两种方式编写。

使用jQuery 1.4 Event.data参数：

var lids = [1,2,3];
for (i in lids) {
    var li_id = lids[i];

    $('#' + li_id).bind('mouseover', { id: li_id }, function(ev) {
        console.log(ev.data.id);
    });
}

或者，使用匿名函数创建一个闭包：

var lids = [1,2,3];
for (i in lids) {
    var li_id = lids[i];

    // an anonymous function 
    (function (id) {
        $('#' + id).bind('mouseover', function() {
            console.log(id);
        });        
    })(li_id); // ...called every time with different id

}

在这种情况下我更喜欢jQuery Event.data方式。

Answer 2

所以关闭时，正确的答案是：

$(li_id).bind('mouseover', function(val) { 
                             return function() { 
                                console.log(val); 
                             } 
                           }(li_id));

但是只有在需要将循环的值传递给函数时才需要这样做。

为刚刚创建的li元素绑定不同的函数

2 个答案: