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

Javascript变量值作为html类名中的数字

1 个答案: