2

私は、私の大学の学部の 1 つのリソースを収容する小さな Web サイトに取り組んでいます。すべてが順調に進んでいるので、より直感的になるように機能を少し追加しようとしています。

完全な HTML 構造とその他すべてを表示したい場合は、問題のページをご覧ください: {個人のコンテンツを保護するためにリンクを削除しました}

基本的には、この夏に私たちが担当する各キャンプ専用の列を持つテーブルです. これはすべてうまくてダンディです。ここでやりたいことは、現在セッション中のキャンプの行を強調表示することです (行に「アクティブ」なクラスを追加することによって)。JavaScript の使用経験がかなり限られているため、次のように考えました。

<script type="text/javascript" >
$(document).ready(function() {
    var today = new Date();

    var Traffic_Court_Start = new Date("May 31 2012 12:01 AM");
    var Traffic_Court_Stop = new Date("June 1 2012 11:59 PM");
    var Summer_Enrichment_Start = new Date("June 10 2012 12:01 AM");
    var Summer_Enrichment_Stop = new Date("June 16 2012 11:59 PM");
    var Wbb_Ind_Start = new Date("June 11 2012 12:01 AM");
    var Wbb_ind_Stop = new Date("June 14 2012 11:59 PM");
    var Soccer_Referee_Start = new Date("June 15 2012 12:01 AM");
    var Soccer_Referee_Stop = new Date("June 16 2012 11:59 PM");
    var Broadcast_Start = new Date("June 17 2012 12:01 AM");
    var Broadcast_Stop = new Date("June 21 2012 11:59 PM");
    var Tennis_1_Start = new Date("June 17 2012 12:01 AM");
    var Tennis_1_Stop = new Date("June 21 2012 11:59 PM");
    var Tennis_2_Start = new Date("June 24 2012 12:01 AM");
    var Tennis_2_Stop = new Date("June 28 2012 11:59 PM");
    var Volleyball_Start = new Date("July 8 2012 12:01 AM");
    var Volleyball_Stop = new Date("July 11 2012 11:59 PM");
    var Soccer_1_Start = new Date("July 8 2012 12:01 AM");
    var Soccer_1_Stop = new Date("July 12 2012 11:59 PM");
    var IACAC_Start = new Date("July 9 2012 12:01 AM");
    var IACAC_Stop = new Date("July 11 2012 11:59 PM");
    var Summer_Forensics_Start = new Date("July 15 2012 12:01 AM");
    var Summer_Forensics_Stop = new Date("July 28 2012 11:59 PM");
    var Soccer_2_Start = new Date("July 22 2012 12:01 AM");
    var Soccer_2_Stop = new Date("July 26 2012 11:59 PM");
    var Cross_Country_Start = new Date("July 25 2012 12:01 AM");
    var Cross_Country_Stop = new Date("July 28 2012 11:59 PM");

    if((today <= Traffic_Court_Stop && today >= Traffic_Court_Start))
        {
            document.getElementById('traffic_court').classList.add('active');
        };

    if((today <= Summer_Enrichment_Stop && today >= Summer_Enrichment_Start))
        {
            document.getElementById('summer_enrichment').classList.add('active');
        };

    if((today <= Wbb_Ind_Stop && today >= Wbb_Ind_Start))
        {
            document.getElementById('wbb_ind').classList.add('active');
        };

    if((today <= Soccer_Referee_Stop && today >= Soccer_Referee_Start))
        {
            document.getElementById('soccer_referee').classList.add('active');
        };

    if((today <= Broadcast_Stop && today >= Broadcast_Start))
        {
            document.getElementById('broadcast').classList.add('active');
        };

    if((today <= Tennis_1_Stop && today >= Tennis_1_Start))
        {
            document.getElementById('tennis_1').classList.add('active');
        };

    if((today <= Tennis_2_Stop && today >= Tennis_2_Start))
        {
            document.getElementById('tennis_2').classList.add('active');
        };

    if((today <= Volleyball_Stop && today >= Volleyball_Start))
        {
            document.getElementById('volleyball').classList.add('active');
        };

    if((today <= Soccer_1_Stop && today >= Soccer_1_Start))
        {
            document.getElementById('soccer_1').classList.add('active');
        };

    if((today <= IACAC_Stop && today >= IACAC_Start))
        {
            document.getElementById('IACAC').classList.add('active');
        };

    if((today <= Summer_Forensics_Stop && today >= Summer_Forensics_Start))
        {
            document.getElementById('summer_forensics').classList.add('active');
        };

    if((today <= Soccer_2_Stop && today >= Soccer_2_Start))
        {
            document.getElementById('soccer_2').classList.add('active');
        };

    if((today <= Cross_Country_Stop && today >= Cross_Country_Start))
        {
            document.getElementById('cross_country').classList.add('active');
        };
});
</script>

ご覧のとおり、まず今日の日付を取得し、次に各キャンプの開始日と終了日を指定します。次に、一連の if ステートメントを使用して、「今日」が各キャンプの開始日と終了日の間にあるかどうかを判断します。それが真の場合、そのキャンプに対応する行にクラス「アクティブ」を追加します。

最初の 2 つのキャンプでは正しく機能しているようです...つまり、「今日」の値を 5 月 31 日に変更すると、最初の行が強調表示されます。または、6 月 15 日に変更すると、2 行目が強調表示されます。問題は、'today' が 6 月 15 日の場合、summer_enrichment 行と Soccer_referee 行の両方を強調表示する必要があることです。summer_enrichment 行のみが強調表示されます。

参照する要素 ID、変数のスペルなどを再確認しましたが、すべてが正しいように見えます (明らかな何かを見落としていない限り)。提示したスクリプトを使用できない理由はありますか? そんなことはないと思いますが、こんなに連続してif文を使うと何か問題があるのでしょうか？私の唯一の考えは、おそらくそれらがelseケースの束であると考えているということですが、各ifステートメントの後にセミコロンを付けてエスケープすると思いました。

何かご意見は？おそらくこれを行うためのより良い方法ですか？私はいくつかの答えを探しましたが、他のどこにも似たようなものを見つけることができなかったようです（ただし、これは以前に行われ、より良い実装で行われたと確信しています）。

ご協力いただきありがとうございます！！！

編集: これらの回答の助けを借りてすべてが機能するようになった後、この質問に出くわす可能性のある将来のユーザーのために最終的なコードを共有すると考えました.

<script type="text/javascript">
$(document).ready(function() {
    var today = new Date();

    var SCHEDULE = {
        'tc': ['May 31 2012', 'June 1 2012'],
        'se': ['June 10 2012', 'June 16 2012'],
        'wbb': ['June 11 2012', 'June 14 2012'],
        'sr': ['June 15 2012', 'June 16 2012'],
        'broadcast': ['June 17 2012', 'June 21 2012'],
        'ten1': ['June 17 2012', 'June 21 2012'],
        'ten2': ['June 24 2012', 'June 28 2012'],
        'volleyball': ['July 8 2012', 'July 11 2012'],
        'soc1': ['July 8 2012', 'July 12 2012'],
        'iacac': ['July 9 2012', 'July 11 2012'],
        'sf': ['July 15 2012', 'July 28 2012'],
        'soc2': ['July 22 2012', 'July 26 2012'],
        'cc': ['July 25 2012', 'July 28 2012']
    };

    for (var camp in SCHEDULE) {
    console.log('checking ' + camp + ', dates have to be within the ' + SCHEDULE[camp] + ' range');
    //console.log(Date.parse(SCHEDULE[camp][0]));
        if (today >= Date.parse(SCHEDULE[camp][0]) && today <= Date.parse(SCHEDULE[camp][1])) {
            console.log(camp + ' is currently in session!');
            document.getElementById(camp).classList.add('active'); 
        };
    };
});
</script>

みんな本当にありがとう!!!

4

5 に答える 5

2

強調表示されていないコンテンツが「点滅」せず、パフォーマンスがわずかに向上するように、サーバー側でロジックを実行することをお勧めします。おそらくより重要な改善は、クライアントの時間設定に関係なく一貫したレンダリングになります。

私は上記を強く支持しますが、JS ソリューションをより保守しやすいものにすることもできます。範囲に対して日付をチェックし、クラスを適用し、日付参照の保存方法を正規化するための再利用可能な関数を含むようにコードを構成します。

var TODAY = new Date();

//Individual dates could be organized as objects,
//but using arrays below seems to be more readable and tidy
var SCHEDULE = {
    'some-class': ['May 5 2011', 'June 5 2011'],
    'some-class-a': ['May 5 2012', 'June 5 2012'],
    'some-class-b': ['May 10 2012', 'June 10 2012'],
    'some-class-c': ['May 15 2012', 'June 15 2012'],
    'some-class-d': ['May 20 2012', 'June 20 2012'],
    'some-class-e': ['May 25 2012', 'June 25 2012']
};

for (var camp_ in SCHEDULE) {
    if (TODAY >= Date.parse(SCHEDULE[camp_][0]) && TODAY <= Date.parse(SCHEDULE[camp_][1])) {
        document.getElementById(camp_).classList.add('active');
    }
}

ここで作業フィドル: http://jsfiddle.net/ovfiddle/bMBcq/

于 2012-05-17T02:05:29.453 に答える
1

コメント：

あなたのコードでは：

> var Traffic_Court_Start = new Date("May 31 2012 12:01 AM");

その日付文字列形式を理解している地域の設定に依存しています。日付の解析は実装に依存しており、米国固有の形式がすべての地域のすべてのブラウザで機能すると信じる理由はありません。指定されている唯一の形式はES5のISO8601であり、すべてのブラウザーがそれをサポートしているわけではありません。以前のECMAScripted3ではフォーマットはまったく指定されていません。

また、上記はクライアントのローカルタイムゾーンに日付オブジェクトを作成するため、タイムゾーン設定が異なる2つのクライアント（たとえば、1つは夏時間あり、もう1つは夏時間なし）は、2つの異なる時間に解決します。

クライアントで日付を処理する必要がある場合は、すべてをUTCで実行し、必要な場合にのみローカルの日付オブジェクトに変換することをお勧めします。また、コードが正しいことをユーザーに確認します（たとえば、現在の日付と時刻がsysetm設定に基づいていると思われるものを表示します。これは、間違っているか、現在の場所と同期されていない可能性があります）。

UTC値からローカル日付オブジェクトを作成するのは、Date.UTC（）を使用して簡単です。

var date = new Date(Date.UTC (year, month[, date[, hours[, minutes[, seconds[, ms]]]]]);

これは、好きな形式を受け入れる単純な関数に変えることができます。

于 2012-05-17T02:55:11.353 に答える
1

これが試みです。データベースを使用していないため、日付をデータ属性として保存してみてください。それらをタイムスタンプに変換して比較できるようにします: http://jsfiddle.net/uJEJ7/26/

私は何かを見落としていると確信していますが、おそらくそれはアイデアを刺激するでしょう.

あなたのページは PHP で書かれていることに気付きました。その方が簡単かもしれません。Camp データを連想配列に保存し、それをループしてテーブル行を生成し、日付が一致するかどうかに基づいてマークアップを出力します。

幸運を！

于 2012-05-17T05:06:20.807 に答える
0

date.jsをチェックしてください。具体的には...

http://code.google.com/p/datejs/wiki/APIDocumentation#compare

最初の日付を2番目の日付と比較し、それらの相対値の数値表示を返します。-1=これは<日付です。0=値は等しい。1=これは>日付です。

isAfter()とメソッドはisBefore()あなたの問題に役立つかもしれません:)

ここからライブラリをダウンロードします。

http://code.google.com/p/datejs/downloads/detail?name=date.js&can=2&q=

また、moment.jsをチェックアウトすることにも言及する価値があります。2つのライブラリは互いに補完し合っていると思います。

于 2012-05-17T01:30:40.083 に答える
0

日付に大なり/小なり演算子を使用できるかどうかはわかりませんが、数値 (ミリ秒) を扱うため、タイム スタンプを比較すると確実に機能します。

次のようなタイムスタンプを取得できます。

var today = new Date().getTime();
于 2012-05-17T01:25:21.303 に答える