Javascript动态地将对象推入不能在Firefox / IE中工作的数组 [英] Javascript dynamically pushing objects into an array not working in Firefox/IE

问题描述

这有点涉及，我会尽可能的清楚。我还会先说说这是Chrome和IE的更新版本，而不是在Firefox或者较旧的IE中，这是我的问题的主要原因。

This is a bit involved, I'll try to be as clear as possible. I'll also preface by first saying that this is working as intended in Chrome and later versions of IE but not in Firefox or older IE, that's the main thrust of my question.

我已经在页面上添加了一个jquery datepicker日历，其中包含事件列表。这些事件各有一个名称，表示他们的日期，并且都有css类列表。我创建了一个数组（列表），通过getElementsByClassName（listing）获取所有这些事件。然后我创建了另一个数组（事件），并遍历列表中的所有元素，将对象推送到为datpicker格式化的新数组的每个元素中。然后我在datepicker'beforeShowDay'函数中使用这个数组（events）来突出显示/链接所有有事件的日期。

I've added a jquery datepicker calendar to a page that has a list of events on it. The events have each been given names indicating the date they fall on and all have the css class "listing". I created an array (listing) that grabs all of these events with getElementsByClassName("listing"). I then created another array (events) and iterate through all the elements in 'listing' pushing an object into each element of the new array formatted for datepicker. Then I use this array (events) in the datepicker 'beforeShowDay' function to highlight/link all dates that have events.

再次，这在Chrome和较新的IE但不是Firefox（日期显示器显示但不突出显示日期）或较旧的IE版本（日期戳日历不显示）。任何关于如何使所有浏览器工作的想法？

Again, this works great in Chrome and newer IE but not Firefox (datepicker displays but no highlighted dates) or older IE versions (the datepicker calendar does not display). Any thoughts on how to get it working across all browsers?

这是我的代码：

$(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。

One thing I've noticed is that if I replace the for loop that generates the 'events' array with an explicit definition of each value it will work in Firefox but still not older 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") }
    ];

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

Thanks in advance for any help, haven't had any luck finding answers anywhere.

编辑*：

更改 document.getElementsByClassName（listing）; / code>到 $（。listing）; 现在在所有版本的IE中工作得很好（ getElementsByClassName 在IE< 9）中不起作用。仍然没有日期突出在FF。在FF控制台中看到的唯一的错误是关于不相关的CSS和prettyPhoto /幻灯片js，不要以为这些与这个问题有关。？

Edit*:
Changed document.getElementsByClassName("listing"); to $(".listing"); working great in all versions of IE now (getElementsByClassName does not work in IE<9). Still no dates highlighting in FF. The only errors I'm seeing in FF console pertain to un-related CSS and prettyPhoto/slideshow js, don't think these are related to this problem at all..?

编辑*：

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

Edit*:
Not sure if I should be replacing the content of my original question or appending, apologies if I'm making this too long... Continuing to try different things, still no luck. Everything is working fine in all browsers except for FF, the calendar pops up fine but no event dates are highlighted/linked. I tried explicitly filling the 'events' array instead of iteratively pushing into it and this works fine. Seems that the iterative push part is what's not working in 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-loop有问题吗？再次感谢您的任何见解...

Works fine in FF. Does anyone see something wrong with the for-loop above? Thanks again for any insights...

推荐答案

好的，花了很多时间才发现问题。最后很笨，但现在我知道了。显然，当你用破折号抛出新的Date（）时，FF会出现问题，但它可以使用斜线。所以我的主要错误（在原来的帖子中应该更具体一些），在每个事件元素的名称标签中使用格式MM-DD-YYYY。我将每个事件元素的名称标签更改为格式MM / DD / YYYY，更新了链接功能以反映这一点，现在所有测试的浏览器（Chrome，IE 9，IE< 9，FF ）

Ok, took a lot of fiddling around but found the problem. Pretty dumb ultimately but now I know. Apparently FF has problems when you throw new Date() at it with dashes, but it works with slashes. So my main mistake (which I should have been more specific about in the original post, apologies) was using the format "MM-DD-YYYY" in the name tags of each event element. I changed the name tags of each event element to the format "MM/DD/YYYY", updated the linking function to reflect this and everything seems to be working perfectly now across all tested browsers (Chrome, IE 9, IE<9, FF).

感谢您的所有建议，绝对有助于我取得最终解决方案。

Thanks for all of your suggestions, definitely helped get me to the final solution.

这篇关于Javascript动态地将对象推入不能在Firefox / IE中工作的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！