html类名中的数字形式的Javascript变量值

Question

我想把变量"i"放在这个代码中：

do {
$('.dot:nth-child(1)').click(function(){
  $('.inside').animate({
    'width' : (i*width)+'%'
  }, 500);
});    
i++;
}
while (i <= number);

像这样-但它不起作用：

do {
$('.dot:nth-child('+ i +')').click(function(){
  $('.inside').animate({
    'width' : (i*width)+'%'
  }, 500);
});    
i++;
}
while (i <= number);

Answer 1

这是经典的闭包问题：传递给click的函数有一个对i变量的持久引用，而不是创建函数时它的副本。因此，当点击发生时（循环结束后），所有的click最终都会使用i的值。

通常的解决方案是使用构建器函数：

do {
  $('.dot:nth-child('+ i +')').click(buildHandler(i));    
  i++;
}
while (i <= number);
function buildHandler(index) {
  return function(){
    $('.inside').animate({
      'width' : (index*width)+'%'
    }, 500);
  };
}

---

也就是说，在这种情况下，您不需要为每个元素使用不同的处理程序函数；相反，只需要一个处理程序函数来检查它正在处理哪个子级：

$('.dot').click(function(){
  var index = $(this).index();
  $('.inside').animate({
    'width' : (index*width)+'%'
  }, 500);
});

更多：index