javascript - 在简单的 HTML 事件列表中将 CSS 类添加到过去的事件

标签 javascript html css

我有一个 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.

- MDN web docs

见下面的代码:

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/

相关文章:

javascript - 替换现有内容=本地存​​储+现有内容。 JavaScript、网络存储、本地存储

javascript - jQuery.Lazy() : Plugin is not loading my 'li' contents

html - 为什么打开一个宽度为480px的网站会有空白?

html - 使背景 "Boxes"更具响应性

css - 如何更改 c3.js 中列之间的间距?

javascript - localStorage 保存导航栏状态

javascript - 415(不支持的媒体类型)与 REST 发布请求

html - css 表格问题

javascript - 使用 SlideToggle 停止动画

javascript - 如何在其父项悬停时更改组件的样式?