动态创建OnClick处理程序Jquery

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); });
}

全演示：

​

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

​

然而，事件被注册时，处理程序总是使用i的最新值，即4，当我希望在处理程序注册时使用i的值，所以当我分别单击test-class-0、1、2、3时，我会得到警报(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);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

​

Answer 2

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

​

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

​

Answer 3

使用closure

​

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

<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>

​