jQuery：隱藏div對象日期對象

Question

我想用JavaScript/jQuery創建一個非常簡單的html日程安排。 所以每個事件有一個div，一天，一年和一年的數據屬性。腳本應該將這些數據屬性與當前日期進行比較，並在過去的日子（希望你明白：D）時隱藏/顯示容器。不幸的是沒有工作:(

我當前的代碼： https://jsfiddle.net/ypkzhocy/1/

<div class="event" data-day="28" data-month="7" data-year="2017"> 
     <h2>Birthday</h2> 
     <span class="date">28.07.2017</span> 
     <p>Description</p> 
    </div> 
    <div class="event" data-day="5" data-month="8" data-year="2017"> 
     <h2>Summerparty</h2> 
     <span class="date">05.08.2017</span> 
     <p>Description</p> 
    </div> 
    <div class="event" data-day="20" data-month="9" data-year="2017"> 
     <h2>meeting</h2> 
     <span class="date">20.08.2017</span> 
     <p>Description</p> 
    </div> 

JavaScript的

$(document).ready(function() { 
    dateMethod(); 
}); 

function dateMethod() { 
    var today = new Date(); 
    var dd = today.getDate(); 
    var mm = today.getMonth() + 1; 
    var yyyy = today.getFullYear(); 
    var day = $(this).data("day"); 
    var month = $(this).data("month"); 
    var year = $(this).data("year"); 

    if (yyyy < year && mm =< month && dd > day){ 
    $(".event").show(); 
    } else{ 
    $(".event").hide(); 
    } 
} 

和一些CSS

  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700'); 

     * { 
      font-family: Montserrat; 
      margin: 0; 
      padding: 0; 
     } 

     .event h2 { 
      text-transform: uppercase; 
      display: inline; 
      color: #fff; 
     } 

     .event { 
      max-width: 40em; 
      background-color: #009688; 
      padding: .5em; 
      margin: 1em 0 2em 1em; 
     } 

Answer 1

數據屬性爲了比較，你不需要一天加逐月和比較的日子，所以每年由兩個日期年。

您可以簡單地比較兩個日期對象。

只記得個月不等的時間間隔0 - 11

的片段（updated fiddle）：

$(document).ready(function() { 
 
    dateMethod(); 
 
}); 
 

 
function dateMethod() { 
 
    var today = new Date(); 
 

 
    $('.event').each(function(idx, ele) { 
 
     var day = $(ele).data("day"); 
 
     var month = $(ele).data("month"); 
 
     var year = $(ele).data("year"); 
 

 
     var divDate = new Date(year, month - 1, day); 
 

 
     $(ele).toggle(divDate >= today); 
 
    }) 
 
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700'); 
 

 
* { 
 
    font-family: Montserrat; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.event h2 { 
 
    text-transform: uppercase; 
 
    display: inline; 
 
    color: #fff; 
 
} 
 

 
.event { 
 
    max-width: 40em; 
 
    background-color: #009688; 
 
    padding: .5em; 
 
    margin: 1em 0 2em 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="event" data-day="28" data-month="7" data-year="2017"> 
 
    <h2>Birthday</h2> 
 
    <span class="date">28.07.2017</span> 
 
    <p>Description</p> 
 
</div> 
 
<div class="event" data-day="5" data-month="8" data-year="2017"> 
 
    <h2>Summerparty</h2> 
 
    <span class="date">05.08.2017</span> 
 
    <p>Description</p> 
 
</div> 
 
<div class="event" data-day="20" data-month="9" data-year="2017"> 
 
    <h2>meeting</h2> 
 
    <span class="date">20.08.2017</span> 
 
    <p>Description</p> 
 
</div>

Answer 2

我認爲有幾個有問題你的js部分。this關鍵字i該函數將引用該函數本身。你需要一個循環出現，以便通過DOM節點進行迭代，然後得到每個

$(document).ready(function() { 
    dateMethod(); 
}); 

function dateMethod() { 
    var today = new Date(); 
    var dd = today.getDate(); 
    var mm = today.getMonth() + 1; 
    var yyyy = today.getFullYear(); 
    $('.event').each(function() { 
     var day = $(this).data("day"); 
     var month = $(this).data("month"); 
     var year = $(this).data("year"); 
     if (yyyy < year && mm <= month && dd > day){ 
      $(this).show(); 
     } else{ 
      $(this).hide(); 
     } 
    }); 
} 

Answer 3

你如果條件應該是這樣的：

 
if 
    year is behind or 
    same year but month is behind or 
    same year and month but day is behind 
then show 
else hide 

if (yyyy < year 
    || (yyyy === year && mm < month) 
    || yyyy === year && mm === month && dd < day){