我有一些 JavaScript 代码,该代码循环抛出一个列表,并为每个元素创建一个 slider 。其次,它需要一个事件处理程序,因此当更改 slider 时,它会将值写入输入。
当 for 第一次运行时,一切正常,输入获取值,但是当我手动更改 slider 时,它会抛出错误:
Uncaught TypeError: Cannot read property 'maxValue' of undefined
代码:
for (i = 0; i < sliders.length; i++)
{
noUiSlider.create(sliders[i].object[0], {
start: sliders[i].start,
step: 1,
connect: true,
range: sliders[i].range
});
sliders[i].object[0].noUiSlider.on('update', function( values, handle ) {
if ( handle ) {
console.debug(sliders[i]);
sliders[i].maxValue.val(Math.floor(values[handle]));
} else {
sliders[i].minValue.val(Math.floor(values[handle]));
}
});
}
在 slider 变量中我有这个:
var sliders = [
{
"object": $('#number-of-passangers'),
"start": [4, 6],
"range": {
"min": 2,
"max": 15
},
"minValue": $("#min-passanger"),
"maxValue": $("#max-passanger")
},
{
"object": $('#cost-per-day'),
"start": [3500, 65000],
"range": {
"min": 3500,
"max": 65000
},
"minValue": $("#min-cost"),
"maxValue": $("#max-cost")
},
]
最佳答案
那是因为i
是循环的索引,每次迭代后都会递增。增量前i < sliders.length
被评估,如果为真,则执行循环体。这意味着,循环结束后i == sliders.length
,所以sliders[i]
未定义。 i
驻留在事件处理程序的外部范围内,因此它的值对于每个事件处理程序都是相同的。您需要保存它的本地副本,例如:
.on('click', (function (idx) {
return function (values, handle) {
/* use idx here, instead of i*/
}
})(i));
综上所述,您的问题是由范围引起的。如果您考虑:
function make () {
for (var i = 0, result = []; i < 10; i++) {
result.push(function fxi () { console.log(i); });
}
return result;
}
make().forEach(function (fxi) { fxi () }) // logs 10 time »10«
那是因为i
定义在make()
范围内如果内部函数之一 fxi
被调用, i
的定义搜索,在fxi
范围内没有找到,因此搜索会在下一个级别继续进行,make()
这次,找到了,所以它的值就从那里获取。但由于循环已递增 i
运行时最多 10 个,现在每个值都是 10 fxi
.
关于for 中的 Javascript 动态事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39165021/