javascript - 如何在循环中使用 jQuery UI 更新变量？

Question

我想循环创建几个 jQuery UI slider 。这是我的代码:

JavaScript:

var teile = new Array();    
teile[0] = 100;
teile[1] = 200;
teile[2] = 300;

$(function() {
    for (var i = 0; i < 3; i++) {
        $('#slider' + [i]).slider({
            value: teile[i],
            min: 0, max: 600,
            slide: function(event, ui) {
                teile[i] = ui.value;
            }
        });
    }
});

HTML:

<div id="slider0"></div>
<div id="slider1"></div>
<div id="slider2"></div>

CSS:

#slider0{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 600px;
}
#slider1{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 600px;
}
#slider2{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 600px;
}

到目前为止它可以工作，但是使用 slider 时变量的值似乎没有更新。如果我不使用循环，它会以这种方式工作。

Answer 1

我对此不确定，但我认为问题在范围内。

$(function() {
  for (var i=0; i<3; i++) {
    (function(index) {
      $('#slider'+[index]).slider({
        value: teile[index],
        min: 0, max: 600,
        slide: function(event, ui) {
          teile[index] = ui.value;
        }
      })
    })(i);
  }
});