jQuery：日付オブジェクトを含むdivを非表示

Question

JavaScript/jQueryを使用した非常に簡単なhtmlスケジュールを作成したいと思います。 したがって、イベントごとに1つのdiv、1日、午後および年のデータ属性があります。スクリプトは、これらのデータ属性を現在の日付と比較し、日が過ぎたときにコンテナを表示/非表示にする必要があります。残念ながら動作しません:(

私の現在のコード： 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(); 
    } 
} 

と

  @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

の属性を取得するために、そこにループを必要とします年。

2つの日付オブジェクトを単純に比較できます。あなたの条件は次のようになります場合

$(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

は私が持つ夫婦の問題があると思い、いくつかのCSSあなたの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

：

をスニペット（ updated fiddle）11.

から

のみヶ月間隔で0の範囲を覚えておいてください

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