0

これは少し複雑です。できるだけ明確にしようと思います。また、これはChrome以降のバージョンのIEでは意図したとおりに機能しますが、Firefoxや古いIEでは機能しないことを最初に述べます。これが私の質問の主な目的です。

イベントのリストがあるページにjquerydatepickerカレンダーを追加しました。イベントにはそれぞれ、それらが該当する日付を示す名前が付けられており、すべてにcssクラス「リスト」があります。getElementsByClassName（ "listing"）を使用して、これらすべてのイベントを取得する配列（リスト）を作成しました。次に、別の配列（イベント）を作成し、「リスト」のすべての要素を反復処理して、datepicker用にフォーマットされた新しい配列の各要素にオブジェクトをプッシュします。次に、datepicker'beforeShowDay'関数でこの配列（イベント）を使用して、イベントがあるすべての日付を強調表示/リンクします。

繰り返しになりますが、これは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);
        }
    });

});

私が気づいたことの1つは、「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") }
    ];

助けてくれてありがとう、どこにも答えを見つける運がありませんでした。

編集*：IEのすべてのバージョンで正常に機能するように
変更document.getElementsByClassName("listing");されました（ IE <9では機能しません）。FFで強調表示されている日付はまだありません。FFコンソールに表示される唯一のエラーは、関連のないCSSとprettyPhoto / slideshow jsに関連していますが、これらがこの問題に関連しているとはまったく思わないでください。$(".listing");getElementsByClassName

編集*：
元の質問の内容を置き換えるか、追加する必要があるかわからない、これを長くしすぎている場合はお詫びします...別のことを試し続けますが、それでも運がありません。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ループに何か問題があると思いますか？洞察をありがとう...

4

1 に答える 1

0

わかりました、いろいろいじりましたが、問題が見つかりました。最終的にはかなりばかげていますが、今ではわかります。new Date()どうやらFFはダッシュで投げると問題がありますが、スラッシュで動作します。したがって、私の主な間違い (元の投稿でもっと具体的に説明する必要がありました。お詫びします) は、各イベント要素の名前タグで "MM-DD-YYYY" の形式を使用していたことです。各イベント要素の名前タグを「MM/DD/YYYY」の形式に変更し、これを反映するようにリンク機能を更新しました。テスト済みのすべてのブラウザー (Chrome、IE 9、IE<9、FF) ですべてが完全に機能しているようです。 ）。

すべての提案をありがとう、最終的な解決策にたどり着くのに間違いなく役立ちました.

于 2012-09-20T20:50:14.787 に答える