Question

我有一大堆类似的列表项，我想附加mousedown()个函数。所以我想做的就是替换它：

$('#controls li[id=d1]').mousedown(function(){
    console.log('d1');
});
$('#controls li[id=d2]').mousedown(function(){
    console.log('d2');
});

用这个：

var loopvar;
for (loopvar = 1; loopvar <= 2; loopvar++) {
    $('#controls li[id=d' + loopvar + ']').mousedown(function(){
        console.log('d' + loopvar);
    });
}

（这是一个简化的例子 - 我实际上有很多li来处理。）但是当我点击li时，我总是在控制台上获得d3。当循环结束时，loopvar的值为3，所以看起来就是这样。那么如何使用循环附加函数呢？

Answer 1

尝试这种方式：

var loopvar;
for (loopvar = 1; loopvar <= 3; loopvar++) {
    $('#controls li[id=d' + loopvar + ']').mousedown((function(loopvar){
        return function(e){
            console.log(e);
           console.log('d' + loopvar);
        }
    })(loopvar)); //You create a closure locking in the loop iteration variable
}

但理想的情况是，您只需要将事件绑定到选择器，或者使用公共类名称，或者使用id以selector开头。的 Fiddle

使用startswith选择器：

$('#controls li[id^=d]').mousedown(function(e){ console.log(this.id); //here this represents the element you clicked on. } );

<强> Fiddle

还要记住id以selector开头是一个属性选择器，与类选择器相比会慢一些

Answer 2

你永远不应该那样做。
你应该使用类而不是id。

无论如何要使用ID，请尝试：

$('#controls li[id^="d"]').mousedown(function(){
    console.log($(this).attr('id'));
});

要使用循环，必须使用闭包来传递var，但是如此分配回调是不好的，使用上面的方法。

for (var i = 0; i < 3; ++i) {
    (function(loopvar) {
        $('#controls li[id=d' + loopvar + ']').mousedown(function(){
            console.log('d' + loopvar);
        });
    })(i);
}

Answer 3

如果您编写的示例与您的实际代码非常相似，我会这样解决：

$('#controls').find('li[id]').mousedown(function(){
    console.log(this.getAttribute('id'));
    // If you want to use jQuery...
    // console.log($(this).attr('id')); 
});

请注意，$('#controls').find('li[id]')略快于$('#controls li[id]')

使用循环设置mousedown函数

3 个答案: