在循环内的函数中访问对象属性

Question

我一直在尝试将click事件添加到创建的特定div中。 这是成功的，我的问题是当点击它显示我未定义。

这是代码

resulta是一个全局变量（带对象的数组）

for(s = 0;s<resulta.length;s++)
    {
        y = document.createElement('div')
        y.setAttribute('class', 'eachssd');
        var x = document.createTextNode(resulta[s].name)
        y.appendChild(x);
        o.appendChild(y)
        y.addEventListener('click',function bnmhv(){location.href=resulta[s].datasrc},false)
    }

提前致谢

Answer 1

当for循环执行所有创建的事件侦听器时，引用相同的s变量，在每次迭代后，该变量的值等于resulta.length，因此resulta [s]确实是undefined并且每个事件处理程序都会引用此值。您需要做的是通过将其封闭在封闭中来为每个处理程序创建新的范围。此范围可以“保留”resulta[<current iteration's s value>]，以便处理程序可以引用它。

例如：

for(var s = 0; s < resulta.length; s++)
{
    (function (data) {
        var y = document.createElement('div')
        y.setAttribute('class', 'eachssd');
        var x = document.createTextNode(resulta[s].name)
        y.appendChild(x);
        o.appendChild(y)

        y.addEventListener('click', function () { location.href = data.datasrc }, false);
    }(resulta[s]));
}

在每次迭代中，anonymous function is created and immediately invoked都有一个参数为resulta[<current iteration's s value>]，该参数存储在data参数中。一段时间后，当用户点击其中一个已创建的div时，click处理程序将从其词法范围引用data。

进一步阅读

• Closures and lexical scope