Question

JQuery的新手，我不能为我的生活弄清楚这一点。我知道这将是一个简单的。

不能做这个服务器端。

我正在为一个关于季节性瑜伽的客户工作。在入门页面上，我每个季节都有5个div。我只希望看起来依赖于任何特定年份的日期。

例如春天是3月1日到5月31日。

夏天继续等等。我还没有得到具体日期。

使用Foundation 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>

Answer 1

通过获取当年的当前月份，您可以隐藏或显示您的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();
      }
    });

Answer 2

正如chinmayahd指出的那样，你可以使用DateObject中的.getMonth()方法。在我发布的代码中，我添加了一个小提琴供你查看。我基本上做的是创建一个月的“范围”检查当月。我不一定喜欢我如何使用取消变量，我非常确定有一种“更清洁”的方式来限制范围，但它可以工作。

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

根据日期使用JQuery更改Div类

2 个答案: