0

对不起,如果问题标题有点令人困惑,但我不确定如何准确表达我的问题。

我有以下同步 ajax 调用(其目的是获取 json 文件内容)。

$.ajax({
    url: "/JsonControl/Events.json",
    dataType: 'json',
    async: false,
    success: function(jsonObj) 
    {
        for (var i = 0; i < jsonObj.events.length; ++i) 
        {
            if(day == jsonObj.events[i].dateNumber && (navDate.getMonth() + monthAdjust) == (jsonObj.events[i].dateMonth -1) && navDate.getFullYear() == jsonObj.events[i].dateYear)
            {
                document.getElementById("cGrid" + gridMod).className="eventDay";
                document.getElementById("cGrid" + gridMod).onmousedown = function(){document.getElementById("eventBox").src="/Event htms/Event.htm"; document.getElementById("eventBox").document.getElementById("title").innerHTML = (jsonObj.events[i].title);}
                document.getElementById("cGrid" + gridMod).style.backgroundColor = "#336633";
                isAnEvent = true;
            }
        }
    }
});

我遇到的问题是以下行(第 12 行,如果 '$.ajax({' 是第 1 行):

document.getElementById("cGrid" + gridMod).onmousedown = function(){document.getElementById("eventBox").src="/Event htms/Event.htm"; document.getElementById("eventBox").document.getElementById("title").innerHTML = (jsonObj.events[i].title);}

有人告诉我我需要关闭,但我无法对我见过的任何示例做出正面或反面,因为我从未见过以这种方式设置的语法,而且我尝试过的示例不起作用(我会详细说明“不工作”的含义)。

这就是我所尝试的(我用这一行替换了上面提到的相关行,如下所示)。

(function(index) {
                document.getElementById("cGrid" + gridMod).onmousedown = function(){document.getElementById("eventBox").src="/Event htms/Event.htm"; document.getElementById("eventBox").document.getElementById("title").innerHTML = jsonObj.events[index].title;}
            })(i);

我得到的错误是这样的:

Uncaught TypeError: Cannot call method 'getElementById' of undefined 

我在原始问题行以及替换行中遇到此错误,如上所示。

我发现这个自动执行功能的东西很新,所以我不知道如何进行。

任何关于如何绘制 jsonObj.events[i].title 在访问时的实际值而不是字面上绘制 'jsonObj.events[i].title' 的建议将不胜感激。

我也尝试过(猜测,就像我一样) valueOf 方法,但快速研究表明它只是返回布尔值的值。

4

2 回答 2

1

问题是因为 mousedown 事件总是会使用 for 循环中的最后一个索引,您需要使用函数包装 for 循环以确保其值得到正确维护。

for (var i = 0; i < jsonObj.events.length; ++i) (function(i){
 ....stuff here

})(i)
于 2013-01-07T22:33:02.240 回答
1

将循环内代码(由 Justin 建议)与移动到.contentDocumentfor<iframe>内容相结合,以及其他一些更改。

请参阅代码中的注释或在下面询问以了解正在发生的事情。(我假设#eventBox是一个<iframe>

function (jsonObj) {
    for (var i = 0; i < jsonObj.events.length; ++i) (function (i) { // `i` inside function is protected from outside changes
        var cGridMod; // holder to reduce lookups
        if (day == jsonObj.events[i].dateNumber
          && (navDate.getMonth() + monthAdjust) == (jsonObj.events[i].dateMonth -1)
          && navDate.getFullYear() == jsonObj.events[i].dateYear) {
            cGridMod = document.getElementById("cGrid" + gridMod);
            cGridMod.className="eventDay";
            cGridMod.onmousedown = function () {
                var eventBox = document.getElementById("eventBox"); // holder to reduce lookups
                eventBox.onload = function () { // set an onload listener so #document exists at time of execution
                    eventBox.onload = null; // unset it so it only fires once
                    eventBox.contentDocument.getElementById("title").innerHTML = (jsonObj.events[i].title);
                      // using `.contentDocument` to get <iframe> document
                };
                eventBox.src="/Event htms/Event.htm";
                  // now set location (done after so onload will fire when loaded)
            };
            cGridMod.style.backgroundColor = "#336633";
            isAnEvent = true;
        }
    }(i)); // invoke the function for this iteration of the loop; `i`
}
于 2013-01-07T23:03:56.027 回答