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