jQuery: 隐藏带有日期对象的 div

Question

我想用 JavaScript/jQuery 创建一个非常简单的 html 时间表。因此每个事件有一个 div 具有日、月和年数据属性。脚本应该将这些数据属性与当前日期和 hide/show 容器进行比较（希望你 understand: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

我认为您的 js 部分存在一些问题。 this 该函数中的关键字将引用函数本身。您需要一个循环才能遍历 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 2

为了比较两个日期，您不需要逐日比较，逐月比较，逐年比较。

您可以简单地比较两个日期对象。

只记住 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 3

您的 if 条件应如下所示：

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){

jQuery: 隐藏带有日期对象的 div

jQuery: Hide divs with date object

html

javascript

jquery

calendar

schedule