Question

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

启用所有iFrame的designMode
找到三个“按钮”（'a'链接元素） - 单击时会影响其对应的iFrame - 具体取决于其className
将这些“按钮”放入多维数组/对象，即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++;
    }
}

Answer 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
);

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

1 个答案: