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