如何使用jQuery根據日期更改班級

我創建了一個臨時日曆，我需要一段jQuery/Javascript，它會根據日期更改div上的班級。如何使用jQuery根據日期更改班級

我需要以前的所有日子都有一個班級，現在這一天的班級和將來的班級有一個班級。

這是我的源代碼：

<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

在課堂上，我需要在前幾天添加課程 - 課程上一個和未來的日期 - 課程的未來。

所有幫助表示讚賞。

- EDIT -

將原文修改爲更具體。基於

來源

2009-11-17 Jonny Haynes

你有任何代碼嗎？你有什麼格式的日期和你想要的課程等。 – SimonDever 2009-11-17 10:28:03

你如何識別div的日期？您可能想要發佈您正在生成的日曆的HTML。 – 2009-11-17 10:28:06

在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的演示代碼（點點適應炫耀）。點擊輸出標籤來試用它。

Btw。 ~~http://jsbin.com/ewuro~~ ，雖然它應該顯示爲與http://jsbin.com/ewuro/edit相同 - >輸出選項卡，不起作用。由於jsbin背後的框架似乎吞噬了我的正則表達式中的$1，因此三個按鈕（Nov27，Dec4和Dec8將不起作用）。所以只需在輸出表中嘗試一下。

來源

2009-11-17 10:34:27 jitter

嗨我已經在原始問題中添加了更多信息，我對JavaScript不太瞭解，您的建議仍然有效嗎？ – 2009-11-17 11:11:35

我重做了我的解決方案以適應您的問題。僅適用於11月和12月。也能夠處理沒有div的差距日。 – jitter 2009-11-17 12:58:33

嗨，我已經將你的代碼添加到了我的頁面，它仍然沒有將類添加到div。任何想法？ – 2009-11-17 13:23:21

// 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>。這是意想不到的食物:)

來源

2009-11-17 10:47:22

嗨我已經在原始問題中添加了更多信息，我用Javascript不太好，您的建議仍然有效嗎？ – 2009-11-17 11:10:55

如何使用jQuery根據日期更改班級

回答

相關問題