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>

爪哇语

$(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 中的月份范围。

片段(更新的小提琴(：

$(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关键字将引用函数本身。你需要一个循环来遍历 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 条件应如下所示：

如果 年落后或 同年但月落后或 同年同月，但日子晚了 然后显示 否则隐藏

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