[重复]中的Javascript动态事件答案

【问题标题】：Javascript dynamic event in for [duplicate][重复]中的Javascript动态事件
【发布时间】：2017-01-03 01:13:35
【问题描述】：

我有一些 JavaScript 代码，该循环会抛出一个列表，并为每个元素创建一个滑块。其次，它需要一个事件处理程序，因此当滑块更改时，它会将值写入输入。

第一次运行 for 时，一切正常，输入获取值，但是当我手动更改滑块时，它会抛出错误：

未捕获的类型错误：无法读取未定义的属性“maxValue”

代码：

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

在滑块变量中我有这个：

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")
            },
        ]

【问题讨论】：

slider 包含什么，我们如何使用 sliders.length 获取长度？它在代码中没有定义。你能发布完整的代码吗？
滑块是一个简单的变量：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") }, ]
更新问题并提供完整源代码。

标签： javascript list for-loop

【解决方案1】：

那是因为i 是循环的索引，每次迭代后递增。在评估增量 i < sliders.length 之前，如果为 true，则执行循环体。这意味着，在循环结束后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的定义，在@987654333的范围内找不到@，所以搜索在下一级继续，make() 这次，找到了，所以它的值从那里取。但由于循环在运行时将 i 增加到 10，因此每个 fxi 的值现在为 10。

Fiddle

【讨论】：