Question

这有点牵扯，我会尽量保持清醒。我还要先说明这是在Chrome及更高版本的IE中有效，但在Firefox或旧IE中没有，这是我提问的主要内容。

我在页面上添加了一个jquery datepicker日历，其中包含一系列事件。每个事件都有名称，表明它们落在哪个日期，并且所有事件都有css类“列表”。我创建了一个数组（列表），用getElementsByClassName（“listing”）抓取所有这些事件。然后我创建了另一个数组（事件）并遍历'listing'中的所有元素，将对象推入为datepicker格式化的新数组的每个元素。然后我在datepicker'foresthowDay'函数中使用这个数组（事件）来突出显示/链接所有有事件的日期。

同样，这适用于Chrome和更新的IE浏览器，但不适用于Firefox（日期选择器显示但没有突出显示的日期）或较旧的IE版本（日期选择器日历不显示）。关于如何让它在所有浏览器中运行的任何想法？

这是我的代码：

$(document).ready(function() {

    var listing = document.getElementsByClassName("listing");
    var events = new Array();

    for (var i = 0; i < listing.length; i++) {
        // something wrong with this line...?
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    }
    $("#calendar").datepicker({
        beforeShowDay: function(date) {
            var result = [false, '', null];
            var matching = $.grep(events, function(event) {
                return event.Date.valueOf() === date.valueOf();
            });

            if (matching.length) {
                result = [true, 'highlight', null];
            }
            return result;
        },
        onSelect: function(dateText) {
            var selectedDate = new Date(dateText);
        var day = selectedDate.getDate();
        var month = selectedDate.getMonth() + 1;
        var year = selectedDate.getFullYear();
        location.hash = "#" + month + "-" + day + "-" + year;
        //alert(month + "-" + day + "-" + year);
        }
    });

});

我注意到的一件事是，如果我用生成'events'数组的for循环替换每个值的显式定义，它将在Firefox中起作用，但仍然不是旧的IE。

换句话说，取而代之：

    for (var i = 0; i < listing.length; i++) {
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    };

有了这个：

    var events = [ 
        { Title: "Event 1", Date: new Date("9/12/2012") }, 
        { Title: "Event 2", Date: new Date("9/25/2012") }, 
        { Title: "Event 3", Date: new Date("9/29/2012") }
    ];

提前感谢您的帮助，没有任何运气在任何地方找到答案。

编辑*：
现在将document.getElementsByClassName("listing");更改为$(".listing");在所有版本的IE中都运行良好（getElementsByClassName在IE＆lt; 9中不起作用）。仍然没有在FF突出显示的日期。我在FF控制台中看到的唯一错误与不相关的CSS和prettyPhoto / slideshow js有关，不要认为这些与这个问题有关。？

编辑*：
我不确定我是否应该替换原始问题的内容或附加内容，如果我这么做太久就道歉...继续尝试不同的事情，仍然没有运气。除了FF之外，所有浏览器都能正常工作，日历弹出正常，但没有突出显示/链接事件日期。我尝试显式填充'events'数组而不是迭代地推入它，这很好。似乎迭代推送部分在FF中不起作用。

换句话说，取而代之：

    var events = [];
    for (var i = 0; i < listing.length; i++) {
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    }

有了这个：

    var events = [ 
        { Title: "Event 1", Date: new Date("9/20/2012") }, 
        { Title: "Event 2", Date: new Date("9/27/2012") }, 
        { Title: "Event 3", Date: new Date("10/4/2012") }
    ];

在FF中正常工作。有没有人看到上面的for循环有问题？再次感谢任何见解...

Answer 1

好的，花了很多时间摆弄，但发现了问题。最后很傻，但现在我知道了。显然FF在使用短划线向new Date()投掷时会出现问题，但它适用于斜杠。因此，我的主要错误（我应该在原始帖子中更具体地说明道歉）是在每个事件元素的名称标签中使用格式“MM-DD-YYYY”。我将每个事件元素的名称标签更改为“MM / DD / YYYY”格式，更新了链接功能以反映这一点，现在所有测试浏览器的所有内容似乎都运行良好（Chrome，IE 9，IE＆lt; 9，FF ）。

感谢您提出的所有建议，绝对有助于我找到最终解决方案。

Javascript动态地将对象推送到不在Firefox / IE中工作的数组中

1 个答案: