Question

基本上我有一些事件监听器及其处理函数定义如下：

<div id="postTextBlock"/>
<div id="postImageBlock"/>
<div id="postQuoteBlock"/>
<div id="postLinkBlock"/>

document.getElementById('postTextBlock').addEventListener('click', function() { showPostType(postTextBlock) }, false);
document.getElementById('postImageBlock').addEventListener('click', function() { showPostType(postImageBlock) }, false);
document.getElementById('postQuoteBlock').addEventListener('click', function() { showPostType(postQuoteBlock) }, false);
document.getElementById('postLinkBlock').addEventListener('click', function() { showPostType(postLInkBlock) }, false);

var showPostType = (function () {
    var postTypes = new Array('postTextBlock', 'postImageBlock', 'postQuoteBlock', 'postLinkBlock')

    return function(type) {
        for (var i = 0; i < postTypes.length; i++) {
            (function(index) { alert(document.getElementById(postTypes[index])) })(i)
        }
    }
})()

当我运行此操作时，我将收到5个警报。一个用于我的数组中定义的每个postTypes，而我猜测的最终空值是postTypes[5]。当我在i = 5（i = 5 = 4）设置for循环时，为什么用postTypes.length执行代码。

编辑：我添加了它引用的html以及完整的数组值。希望这清除了一些关于代码无法正常工作的内容。

Answer 1

您知道您的代码示例不起作用吗？我抓住了它所要做的事情。

http://jsfiddle.net/8xxQE/1/

document.getElementById('postTextBlock').addEventListener('click', function() {
    showPostType('postTextBlock'); //Argument does nothing
}, false);
document.getElementById('postImageBlock').addEventListener('click', function() {
    showPostType('postImageBlock'); //Argument does nothing
}, false);

上面传递的参数不包括在内，基于功能代码，他们什么也没做。

var showPostType = (function() {
    var postTypes = new Array('postTextBlock', 'postImageBlock')

    return function(/*type argument removed isn't referenced*/) {
        var l = postTypes.length;
        for (; l--;) {
            (function(index) {
                console.log(index, postTypes[index]);
                alert(document.getElementById(postTypes[index]))
            })(l);
        }
    }
})()

我添加了一些技巧，只是一个更好的编写for循环方法的例子。您的关闭工作正常，我认为您正在做其他事情导致此代码无法按预期工作。为什么这个错误会运行4次，数组中只有两个项目。我的例子每次点击一个div时都会运行两次，正如你在JSFiddle上看到的那样。

Answer 2

div的id是“postLInkBlock”，但你正在搜索“postLinkBlock”。那是空的。

Javascript for循环遍历循环约束，可能误解了闭包

2 个答案: