JavaScript 根据日期更改表格行类

Question

我正在开发一个小网站，该网站包含我所在大学的一个系的一些资源。一切进展顺利，因此我尝试添加一些功能以使事情变得更加直观。

如果您想查看完整的 HTML 结构和其他所有内容，请查看相关页面:{link removed to protect personal content}

基本上，这是一个表格，其中一行专门用于我们今年夏天负责的每个训练营。这一切都很好，花花公子。现在我想要做的是突出显示当前正在 session 的任何营地的行(通过将类“事件”添加到该行)。鉴于我在 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 语句来确定“今天”是否在每个营地的开始日期和结束日期之间。如果是，它会将“active”类添加到与该营地对应的行。

它似乎对前两个训练营工作正常...也就是说，如果我将“今天”的值更改为 5 月 31 日，它会突出显示第一行。或者，如果我将其更改为 6 月 15 日，它会突出显示第二行。问题是，如果“今天”是 6 月 15 日，它应该同时突出显示 summer_enrichment 和 soccer_referee 行。它只突出显示 summer_enrichment 行。

我已经仔细检查了我引用的元素 ID、我的变量的拼写等，一切看起来都是正确的(除非我遗漏了一些明显的东西)。有什么理由不能使用我提供的脚本吗？我不认为是这种情况，但是像这样连续使用这么多 if 语句有问题吗？我唯一的想法是，也许它认为它们是一堆其他情况，但我想我会在每个 if 语句后用分号转义。

有什么想法吗？也许更好的方法来做到这一点？我四处寻找一些答案，但似乎无法在其他任何地方找到类似的东西(尽管我确信这已经完成并且实现得更好)。

感谢您的帮助!!!

编辑:在其中一些回复的帮助下让一切正常工作之后，我想我会为可能偶然发现这个问题的 future 用户分享最终代码。

<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>

非常感谢大家!!!

Answer 1

我建议在服务器端完成逻辑，这样未突出显示的内容就不会“闪烁”，而且性能会略有提高。一个可以说更重要的改进是无论客户端的时间设置如何，都将呈现一致。

虽然我强烈提倡上述，但 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/