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

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

2 个答案: