javascript - Jquery 在 for 循环中不能很好地工作

Question

可能重复：
Javascript：循环关闭？

我在javascript中有以下代码：

for (var i=0; i < images_array.length; i++) {
$('#thumb_'+ i).live('click', function(){
    $('#image_container_' + current_image_index).hide();
    current_image_index = i;
    alert(current_image_index);
    $('#image_container_' + current_image_index).show();
});}

当我点击任何拇指时，我得到 images_array.length 值。有谁知道发生了什么？

Answer 1

您需要为单击处理程序函数创建一个闭包，如下所示：

for (var i=0; i < images_array.length; i++) {
    $('#thumb_'+ i).live('click', 
        (function(i) {
            return function(){
                $('#image_container_' + current_image_index).hide();
                current_image_index = i;
                alert(current_image_index);
                $('#image_container_' + current_image_index).show();
            }
        })(i)
    );
}

问题是，如果没有闭包，变量会在每个处理程序函数之间共享——它会继续更新，这就是每个处理程序最终都获得array.length值的原因。使用闭包创建变量的本地范围副本i。

这是一个显示差异的演示：

• 原来的
• 带关闭

Answer 2

$.each(images_array,function(value,i) {
  $('#thumb_'+ i).live('click', function(){
  $('#image_container_' + current_image_index).hide();
  current_image_index = i;
  alert(current_image_index);
  $('#image_container_' + current_image_index).show();
});}

正如其他人所说，您需要关闭。现在，您已经在使用 jQuery，所以忘记 for() 并直接使用 $.each。