根据日期比较，使用JQuery（或简单的Javascript）动态更改CSS

Question

I am hand-coding a small calendar of events. 我正在手工编写一小段事件日历。 All that I wish to display is some basic event information (date, time, location, link to learn more). 我只想显示一些基本的事件信息（日期，时间，位置，链接以了解更多信息）。 Since this page will rarely have more than 10-20 events listed at any given time (and only even once or twice per year), I'm not over-engineering it by using a calendar plugin or anything. 由于此页面很少在任何给定时间（每年甚至只有一次或两次）列出超过10-20个事件，因此我不会通过使用日历插件或其他任何东西来过度设计它。

All I wish to do is to compare the current date against the HTML5 <time date=""></time> attribute and alter CSS on a parent element if the date specified is in the past (by at least one day). 我要做的就是将当前日期与HTML5 <time date=""></time>属性进行比较，如果指定的日期是过去的日期（至少一天），则更改父元素上的CSS。

By default the background color of the <li> element with class .event is white ( #fff ). 默认的背景颜色<li>与类元素.event为白色（ #fff ）。 If the date is in the past, I want the background color on the <li class='event'> class to change to grey ( #ddd ) when the page loads. 如果日期是过去的日期，我希望<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>

Answer 1

You can use Javascript to get the current date 您可以使用Javascript获取当前日期

var today = new Date();
var day = today.getDate();
var month = today.getMonth()+1; //Jan = 0
var year = today.getFullYear();

Get the time="" attribute something like so, I added the class dateColor to the container you will be changing: 得到类似的time=""属性，我将类dateColor添加到将要更改的容器中：

var calDate = document.getElementByClass('dateColor').getAttribute("time");

Then do a conditional check via JS 然后通过JS做条件检查

After that you can use toggleClass() via JQuery to toggle a class with CSS background-color: whateverColor on for particular elements if it returns true . 之后，您可以通过JQuery使用toggleClass()来切换具有CSS background-color: whateverColor的类background-color: whateverColor如果特定元素返回true ，则对特定元素启用true 。

Answer 2

Here is a jQuery solution. 这是一个jQuery解决方案。 You could use "addClass()" or a similar method for more flexibility. 您可以使用“ addClass（）”或类似方法来提高灵活性。

https://jsfiddle.net/4nb0w2yu/1/ 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')
  }
});

Answer 3

I've come up with a jQuery example that should do the trick. 我提出了一个可以解决问题的jQuery示例。 I tried to write it as concisely as possible... https://jsfiddle.net/9ekd25L8/3/ 我试图尽可能简洁地编写它... https://jsfiddle.net/9ekd25L8/3/

$("li.event").each(function(){

var dt = new Date();
var month = dt.getMonth() + 1;
if ($(month).length <= 1) {
    var month = "0" + month;    
}
var day = dt.getDate();
if ($(day).length <= 1) {
    var day = "0" + day;    
}
var time = dt.getFullYear() + "-" + month + "-" + day;
var time2 = $(this).find("time").attr("date");
var monthsplit = time.slice(5,7);
var yearsplit = time.slice(0,4);
var daysplit = time.slice(8,10);
var checkday = time2.slice(8,10);
var checkmonth = time2.slice(5,7);
var checkyear = time2.slice(0,4);
var resultyear = yearsplit - checkyear;
var resultmonth = monthsplit - checkmonth;
var resultday = daysplit - checkday;

if (resultyear == 0 && resultmonth <= 0 && resultday <= 0) {
    $(this).addClass("new");
}
else if (resultyear > 0) {
    $(this).addClass("old");
}
else {
  $(this).addClass("old");
}

 if (resultyear == 0 && resultmonth == 0 && resultday == 0) {
    $(this).addClass("today");
}

$("li").click(function() {
    alert(resultyear + "," + resultmonth + "," + resultday);
});

});

This jQuery function just finds all li.event elements and then does some math and lets us know if the date within the <time> is older or newer than today's date. 这个jQuery函数只是查找所有li.event元素，然后进行一些数学运算，并让我们知道<time>中的日期是早于还是晚于今天的日期。

The jQuery just pumps out the current date, formats it like the <time> date attribute, and then subtracts everything. jQuery只会抽出当前日期，将其格式化为<time> date属性，然后减去所有内容。 Then, based on the results, adds an "old" "new" or "today" class to each element. 然后，基于结果，将“旧”，“新”或“今天”类添加到每个元素。

I hope that helps! 希望对您有所帮助！

根据日期比较，使用JQuery（或简单的Javascript）动态更改CSS

问题描述

3 个解决方案

解决方案1
0 2016-09-07 19:35:01

解决方案2
0 已采纳 2016-09-07 19:48:36

解决方案3
0 2016-09-07 21:31:33

根据日期比较，使用JQuery（或简单的Javascript）动态更改CSS

问题描述

3 个解决方案

解决方案1 0 2016-09-07 19:35:01

解决方案2 0 已采纳 2016-09-07 19:48:36

解决方案3 0 2016-09-07 21:31:33

解决方案1
0 2016-09-07 19:35:01

解决方案2
0 已采纳 2016-09-07 19:48:36

解决方案3
0 2016-09-07 21:31:33