我有一个 HTML 格式的静态事件列表,我想在其中使用 javascript 动态地向过去和当前事件添加一个 CSS 类。
列出的每个事件都需要显示单个日期或日期范围,因此解析日期(我在想)需要使用 data-* 属性来完成——这是我以前从未使用过的在这个意义上。
HTML 标记:
<div class="events-list-wrapper">
<div class="event">
<p class="date" data-date="21-01-2017"><span>Jan</span> 17-21</p>
<h3>Event Title</h3> ...
</div>
<div class="event">
<p class="date" data-date="29-08-2017"><span>Aug</span> 29</p>
<h3>Event Title</h3> ...
</div>
<div class="event">
<p class="date" data-date="12-09-2017"><span>Sept</span> 10-12</p>
<h3>Event Title</h3> ...
</div>
</div>
这是我一直在使用的 fiddle , https://jsfiddle.net/t2v21oh6/1/ 编辑:https://jsfiddle.net/t2v21oh6/4/ .我对 javascript 不是很擅长,而且我的代码无法正常工作。不知道为什么。
最佳答案
您可以使用简单的 if {} else {}
语句和 now()
来自 Date
的静态方法以秒为单位获取今天的时间。
The Date.now() method returns the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.
见下面的代码:
let today = Date.now()
$('div.event').each(function() {
let div = $(this);
let divDate = Date.parse($('.date', this).text());
if (divDate < today) {
div.addClass('past');
} else {
div.addClass('today');
}
});
.past {
border: 1px solid gray;
}
.today {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="events-list-wrapper">
<div class="event">
<p class="date"><span>Jan</span> 17-17</p>
<h3>Event Title</h3> ...
</div>
<div class="event">
<p class="date"><span>Aug</span> 30-17</p>
<h3>Event Title</h3> ...
</div>
</div>
关于javascript - 在简单的 HTML 事件列表中将 CSS 类添加到过去的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45927420/