Question

我正在创建一个降临节日历，我需要一个jQuery / Javascript，它将根据日期更改div上的类。

我需要以前所有的日子都有一节课，现在是一节课，将来是一节课。

这是我的源代码：

<div id="container">
        <div class="box nov28">...</div>
        <div class="box dec1">...</div>
        <div class="box dec3">...</div>
        <div class="box dec5">...</div>
        <div class="box dec7">...</div>
        <div class="box dec12">...</div>
        <div class="box dec15">...</div>
        <div class="box dec17">...</div>
        <div class="box dec19">...</div>
        <div class="box dec21">...</div>
        <div class="box dec22">...</div>
        <div class="box dec23">...</div>
    </div>

这不是一个简单的开始12月1日，并持续24天。有12天的“优惠”不会完全遵循。这可以通过div类看出，即nov28 dec1 dec3

在上课日，我需要在前几天添加课程 - 课程之前和未来日期 - 课程未来。

所有帮助表示赞赏。

- 编辑 -

原始帖子修改为更具体。

Answer 1

基于上面的html代码

var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

var month = "dec";
var day = today.getDate();
if (today.getMonth() == 10) {
    month="nov";
}

var selected = $(".container > div."+month+day);
if (selected.size() > 0) {
    selected.prevAll("div").addClass("previous");
    selected.addClass("present");
    selected.nextAll("div").addClass("future");
} else {
    // based on idea from Russ Cam but
    // only loop over all div's if today there is no matching div
    // as this is more costly (loop, regex, ...)
    $('.container > div').each(function() {
        var div = $(this);
        //extract month and date from class value 
        var divMonth = div.attr("class").replace(/.*(nov|dec)\d+.*/, "$1") == 'nov' ? 10 : 11;
        var divDay = div.attr("class").replace(/.*(?:nov|dec)(\d+).*/, "$1");
        var divDate = new Date(today.getFullYear(), divMonth, divDay);
        if (divDate > today)
            div.addClass('future');
        else
            if (divDate < today)
                div.addClass('previous');
            else
                div.addClass('present');
    });
}

检查http://jsbin.com/ewuro/edit以获取演示代码（稍微调整以显示它）。单击输出选项卡进行试用。

顺便说一下。 ~~http://jsbin.com/ewuro~~ ，虽然它应该与http://jsbin.com/ewuro/edit - ＆gt;相同输出选项卡，不起作用。由于jsbin背后的框架似乎吞噬了我的正则表达式中的$1，因此（Nov27，Dec4和Dec8的三个按钮将不起作用）。所以只需在输出选项卡中尝试。

Answer 2

// get today's date
var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

// go through the calendar windows representing each day
$('div.calendar-window').each(function() {
    var div = $(this);
    // check the date of the window.
    // let's imagine that the date is in a span with class date
    var divDate = Date.parse($('span.date', this).text());
    switch(divDate)
    {
        case divDate > today:
            div.addClass('future');
            break;               
        case divDate < today:
            div.addClass('past');
            break;
        default:
            div.addClass('today');   
            break;        
    }      
});

这只是一个例子，但希望你能得到这个想法。考虑到降临日历仅在12月运行，使用完整日期可能过度，只需使用getDate()并进行整数比较可能是更好的方法。此外，我们可以选择<span>元素并迭代它们，在每种情况下将类应用于父<div>。这意味着值得思考：）

如何使用jQuery基于日期更改类

2 个答案: