Question

我有4个以特定方式命名的css类：test-class-0，test-class-1，test-class-2，test-class-3，以便我可以通过编程方式注册自定义点击处理程序。

这是我的尝试：

for(var i = 0; i < 4; i++) {
  $('.test-class-'+i).on('click', function(e){ alert(i); });
}

还包括jsFiddle：http://jsfiddle.net/v0gf8h46/

事件被注册，但是，当我想要处理程序注册时i的值时，处理程序将始终使用i的最新值，即4，因此我得到警报（0），警报（ 1），alert（2）和alert（3）当我分别点击test-class-0,1,2,3时。

当点击处理程序注册时，有没有办法可以锁定函数中i的值？

Answer 1

for(var i = 0; i < 4; i++) {
  $('.test-class-'+i).on('click', {i:i}, function(e){ alert(e.data.i); });
}

Answer 2

或者，您可能只使用一个事件处理程序，并在运行时解析类索引：

http://jsfiddle.net/v0gf8h46/8/

$('[class*="test-class-"').on('click', function() {
    var i = $(this).attr("class").replace("test-class-", "");
    alert(i);
});

Answer 3

使用closure：

＆＃13;

for(var i = 0; i < 4; i++) {
  (function( i ) {
     $('.test-class-'+i).on('click', function(e){ alert(i); });
  })( i )
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-class-0">TEST 1</div>
<div class="test-class-1">TEST 2</div>
<div class="test-class-2">TEST 3</div>
<div class="test-class-3">TEST 4</div>

＆＃13;

Answer 4

您可以尝试使用此代替for：

$('*[class*="test-class-"]').each(function(i){    
    $(this).on('click', function() { alert(i + 1)});
});

动态创建OnClick处理程序Jquery

4 个答案: