我正在手工编写一个小的事件日历。我希望显示的只是一些基本的事件信息(日期、时间、位置、了解更多信息的链接)。由于此页面在任何给定时间很少会列出超过 10-20 个事件(甚至每年只有一次或两次)，因此我不会通过使用日历插件或任何东西来过度设计它。
我只想将当前日期与 HTML5 <time date=""></time> 进行比较如果指定的日期是过去的(至少一天)，则在父元素上属性和更改 CSS。
默认情况下 <li> 的背景颜色类元素 .event是白色的(#fff)。如果日期是过去的，我想要 <li class='event'> 上的背景颜色类在页面加载时变为灰色 (#ddd)。
<doctype html>
<html>
<head>
<title>Events</title>
<style>
.event {
background-color: #fff;
}
</style>
<script>
</script>
</head>
<body>
<ul class="row block-grid events">
<li class="small-12 medium-6 large-4 column event">
<dl>
<dt><time date="2016-02-02">Feb 2</time></dt>
<dd>Boston Public Library at 7:00pm</dd>
<dd>Book launch</dd>
<dd>Boston, MA</dd>
<dd><a href="http://www.bpl.org">More details</a></dd>
</dl>
</li>
</ul>
</body>
</html>最佳答案
这是一个 jQuery 解决方案。您可以使用“addClass()”或类似方法以获得更大的灵 active 。
https://jsfiddle.net/4nb0w2yu/1/
$('time').each(function() {
var submitted_date = new Date($(this).attr('date'));
var now = new Date();
console.log(submitted_date.getTime() < now.getTime());
if (submitted_date.getTime() < now.getTime()) {
$(this).parent().parent().css('background', 'gray')
}
});
关于javascript - 基于日期比较使用 JQuery(或简单的 Javascript)动态更改 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39377520/