用jQuery依賴日期更改Div類

JQuery的新功能和我無法爲我的生活弄清楚這一點。我知道這將是一個簡單的。用jQuery依賴日期更改Div類

不能做這個服務器端。

我正在爲季節瑜伽客戶的網站工作。在入門頁面上，我每個季節都有5個div。我只想要一個依賴於在任何給定年份的日期。

例如，春季是3月1日至5月31日（含）。

夏季繼續等等等等我還沒有給出具體的日期。

使用基金會5，所以我將.hide附加到每個div。

因此腳本應該檢查日期和刪除.hide類從哪個的div的是正確的季節。

<div id="winter-panel" class="hide small-12 medium-6 columns"> 
    <div class="panel"> 
    <h3>Winter</h3> 
    <p>Winter is the water element, a time to flow smoothly and be reflective in our thoughts and in our actions.</p> 
    <p>Natures energy is at it's lowest at 1/5 and the earth seems quieter as vegetation has gone and animals are hibernating - 
      we should do the same: slow down, sleep when you can and conserve energy for the lighter months ahead.</p> 
    <a class="button" href="winter.html">Read more</a> 
    </div> 
</div>

來源

2014-01-06 Silvermodak

通過讓您可以隱藏或顯示您的div今年當月..

$(document).ready(function() { 
     var now = new Date(); 
     var currentMonth = now.getMonth();//returns 0-11 
     //based on month hide or show your div 
     if(currentMonth > 0 && currentMonth < 5) { 
     $("#winter-panel").show(); 
     } 
     else { 
     $("#winter-panel").hide(); 
     } 
    });

來源

2014-01-06 12:28:30 chinmayahd

冬會那麼包含以下號碼：11，0和1 在你的代碼是從Januari檢查到5月。 – timo

由於chinmayahd指出，你可以使用.getMonth()的方法從DateObject。在我發佈的代碼中，我添加了一個小提示，供您查看。我基本上做的是創造一個月的月份檢查「範圍」。我不一定非常喜歡我如何使用取消變量，並且我確信有一種限制範圍的「更乾淨」的方法，但它的工作原理。

//html 
<div id="div1" style="display:none;">1</div> 
<div id="div2" style="display:none;">2</div> 
<div id="div3" style="display:none;">3</div> 
<div id="div4" style="display:none;">4</div> 

//javascript 
var date2 = 3 
var date3 = 6 
var date4 = 9 

var today = new Date(); 
var cancel = false; 

if(today.getMonth()<date2) { 
    $('#div1').show(); 
    cancel = true; 
} 

if(today.getMonth()<date3 && !cancel) { 
    $('#div2').show(); 
    cancel = true; 
} 

if(today.getMonth()<date4 && !cancel) { 
    $('#div3').show(); 
    cancel = true; 
} 

if(today.getMonth()>=date4 && !cancel) { 
    $('#div4').show(); 
    cancle = true; 
}

Fiddle with curent Month

Fiddle without curent Month for testing

來源

2014-01-06 12:57:17 cptnk

用jQuery依賴日期更改Div類

回答

相關問題