循环中的addEventHandler（）具有意外结果 [英] addEventHandler() in a loop has unexpected results

问题描述

我不确定要寻找什么，所以我在这个主题上找不到任何先前的问题，谷歌也没有多少帮助。

I wasn't sure what to look for, so I couldn't find any previous questions on this topic, and Google didn't help much, either.

(function() {
    var element = function(str) {
        return document.getElementById(str);
        },

        parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'),
        len = parent.length,

        slides = slides || [];

    for (var i=0; i<len; i++) {
        var link = parent[i].getElementsByTagName('a')[0],
            slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1));


        if (addEventListener) {
            link.addEventListener('click', function(event){
                event.preventDefault();
                alert(slide.getAttribute('id'));
            });
        } else if (attachEvent) {

        }
    }

})();

因此，在上面的代码中，在for循环中，我将一个事件附加到所有链接（其中五个应该警告他们指向的幻灯片的ID（仅用于调试目的），但是它们都显示最后一张幻灯片的ID。我还创建了一个 jsFiddle 供您查看...行动。

So, in the above code, within the for loop, I attach an event to all the links (five of them) which should alert the ID of the slide they're pointing to (just for debugging purposes), however they all show the ID of the last slide. I also created a jsFiddle for you to see it in... Action.

我假设我搞砸了一些相对简单的东西，我只是弄不清楚。

I'm assuming I am messing up something relatively simple, I just can't figure out what.

推荐答案

javascript中的变量是函数范围，即使在块中声明它们也是如此。这个循环在变量循环周围创建一个闭包，但是在每次迭代时都会重新分配循环。当循环完成时，所有闭包都指向数组中的最后一个元素。

Variables in javascript are function-scope even when you declare them inside a block. This loop creates a closure around the variable loop, but loop is reassigned on every iteration. By the time the loop is done, all the closures point to the last element in the array.

要解决此问题，请以不同方式调整变量的范围：

To fix this, scope the variable differently:

(function() {
    var element = function(str) {
        return document.getElementById(str);
        },

        parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'),
        len = parent.length;

    for (var i=0; i<len; i++) {
        var link = parent[i].getElementsByTagName('a')[0],
            slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1));


        if (addEventListener) {
            link.addEventListener('click', (function(slide){
                return function(event) {
                    event.preventDefault();
                    alert(slide.getAttribute('id'))
                }
            })(slide));
        } else if (attachEvent) {

        }
    }

})();

这篇关于循环中的addEventHandler（）具有意外结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！