如何在循环中用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) 
    }) 
}