javascript - JS/jQuery 提醒其号码的 div 列表

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 8 年前。

我正在制作一个 div 列表，并希望每个 div 都提醒其编号，但结果是我所有的 div 都提醒 11。

for(var i = 1; i <= 10; i++) {
    $('#chatlist').append(
        $("<div class='chatlist_cell'>" + i + "</div>").click( function() { alert(i) } )
    )
}

Answer 1

那是因为你没有通过闭包来保留 i

for (var i = 1; i <= 10; i++) {
  (function(index){
    $('#chatlist').append($("<div class='chatlist_cell'>" + index + "</div>").click(function() {
        alert(index)
    }))
  })(i);
}

另一种选择是使用each()

 $.each(Array(10), function(index) {
  $("<div class='chatlist_cell'>" + (index + 1) + "</div>").appendTo('body').click(function() {
    console.log(index + 1)
  });
});

$.each(Array(10), function(index) {
  $("<div class='chatlist_cell'>" + (index + 1) + "</div>").appendTo('body').click(function() {
    console.log(index + 1)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>