Как обновить переменные с помощью 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) 
    }) 
}