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

Question

我想在一个循环中创建几个 jQuery UI 滑块。这是我的代码：

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;
}

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

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);
  }
});

Answer 2

你需要一个闭包：

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