找到对应的对象 - 让评论系统工作？答案

【问题标题】：Find object that corresponds - getting a comment system to work?找到对应的对象 - 让评论系统工作？
【发布时间】：2014-01-25 23:48:35
【问题描述】：

这就是当 iFrameOn 函数运行时一切应该工作的方式：

开启所有 iFrame 的 designMode
找到三个“按钮”（'a' 链接元素） - 单击时会影响其对应的 iFrame - 取决于其类名
将这些“按钮”放入多维数组/对象，即 target.rtfID.x
每当单击“按钮”时，通过对象找到其对应的 iFrame，并将 iFrame 的 id 作为另一个函数的参数发送。

然而，目前，只要单击任何按钮，它们都会影响同一个 iFrame。我意识到这可能是由于我使用了循环，但我不知道如何让它全部工作。控制台中没有错误。

function iFrameOn() {
    var rtfContainer, rtContainer, richTxt, richTxtId,
        rtf = document.querySelectorAll('div > form > iframe'), //Rich Text Field
        newPost = document.getElementById('richTextField').contentDocument.body,
        target = {}, rtfIndex = 0;
    //Turn iFrames On
    while (rtfIndex < rtf.length) {
        rtfID = rtf[rtfIndex].id;
        if (rtf[rtfIndex].contentDocument.designMode != 'On') {
            rtf[rtfIndex].contentDocument.designMode = 'On';
        }
        newPost.innerHTML = "<i style=\"color:#DDDDDD;\">What's up?</i>";   
        newPost.addEventListener('blur', function() {
            if (newPost.innerHTML == '') {
                newPost.innerHTML = "<i style=\"color:#DDDDDD;\">What's up?</i>";
            }
        }, false);
        document.getElementById('richTextField').contentWindow.addEventListener(
            'focus',
            function() {
                if (newPost.innerHTML == "<i style=\"color:#DDDDDD;\">What's up?</i>") {
                    newPost.innerHTML = '';
                }
            },
            false
        );
        rtContainer = rtf[rtfIndex].nextElementSibling; //Next Element Sibling should be a div
        console.log('rtContainer is: '+rtContainer);
        richTxt = rtContainer.childNodes;
        console.log('richTxt is: '+richTxt);
        for (var i = 0; i < richTxt.length; i++) {
            if (richTxt[i].nodeType != 1 ||
                (richTxt[i].nodeType == 1 &&
                    (richTxt[i].className == 'submit_button sbmtPost'
                        || richTxt[i].className == "")
                )
            ) {
                continue;
            }
            richTxtId = richTxt[i].id;
            target.rtfID = {};
            switch (richTxt[i].className) {
                case 'richText bold':
                    if (target.rtfID.bold != richTxtId) {
                        target.rtfID.bold = richTxtId;
                        console.log(target.rtfID.bold+' is associated with: '+rtfID);
                    }
                    break;
                case 'richText underline':
                    if (target.rtfID.underline != richTxtId) {
                        target.rtfID.underline = richTxtId;
                        console.log(target.rtfID.underline+' is associated with: '+rtfID);
                    }
                    break;
                case 'richText italic':
                    if (target.rtfID.italic != richTxtId) {
                        target.rtfID.italic = richTxtId;
                        console.log(target.rtfID.italic+' is associated with: '+rtfID);
                    }
                    break;
                default:
                    console.log('Error with commenting system!');
                    break;
            }
        }
        var obj = target.rtfID;
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) { 
                console.log("prop: " + prop + " value: " + obj[prop]);
                switch(prop) {
                    case 'bold':
                        document.getElementById(obj[prop]).addEventListener(
                            'click',
                            function() {
                                bold(obj[prop]);
                            },
                            false
                        );
                        break;
                    case 'underline':
                        document.getElementById(obj[prop]).addEventListener(
                            'click',
                            function() {
                                Underline(obj[prop]);
                            },
                            false
                        );
                        break;
                    case 'italic':
                        document.getElementById(obj[prop]).addEventListener(
                            'click',
                            function() {
                                Italic(obj[prop]);
                            },
                            false
                        );
                        break;
                    default: 
                        console.log('Error in for...in loop');
                }
            } else {console.log('error');}
        }
        rtfIndex++;
    }
}

【问题讨论】：

如果没有简单的测试/检查方法，我敢打赌你的问题在于你不应该在循环中定义函数——它会导致这样的问题。内部函数继续可以访问外部范围，因此在它们执行时，它们将获取循环中最后一个 iframe 的信息。你可以通过将循环中变化的值传递给一个函数来解决这个问题，该函数本身返回你想要的函数。
这似乎是问题所在。有什么办法可以避免在循环中定义函数？我这样做的唯一原因是我的富文本函数带有参数，而我不能将参数放入 addEventListener 方法中。编辑：说得太早了。我不能在 iFrame 之间来回切换。现在它只影响它找到的最后一个 iFrame。

标签： javascript loops for-loop while-loop richtextbox

【解决方案1】：

你可以这样做：

function createBolder (val) {
    return function () {
        bold(val);
    };
}

document.getElementById(obj[prop]).addEventListener(
    'click',
    createBolder(obj[prop]),
    false
);

或者如果你真的想保持内联：

document.getElementById(obj[prop]).addEventListener(
    'click',
    (function (val) {
        return function () {
            bold(val);
        };
    }(obj[prop])), // This function call executes immediately (i.e., while still
                   // going through the loop, so the current value of obj[prop]
                   // will be stored inside this function with its own local copy
                   // rather than using the value of obj and prop by the time
                   // the function is executed (probably the completion of the loop))
    false
);

【讨论】：