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

Question

我正在手工编写一小段事件日历。 我只想显示一些基本的事件信息（日期，时间，位置，链接以了解更多信息）。 由于此页面很少在任何给定时间（每年甚至只有一次或两次）列出超过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>

Answer 1

您可以使用Javascript获取当前日期

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

得到类似的time=""属性，我将类dateColor添加到将要更改的容器中：

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

然后通过JS做条件检查

之后，您可以通过JQuery使用toggleClass()来切换具有CSS background-color: whateverColor的类background-color: whateverColor如果特定元素返回true ，则对特定元素启用true 。

Answer 2

这是一个jQuery解决方案。 您可以使用“ addClass（）”或类似方法来提高灵活性。

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

我提出了一个可以解决问题的jQuery示例。 我试图尽可能简洁地编写它... 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);
});

});

这个jQuery函数只是查找所有li.event元素，然后进行一些数学运算，并让我们知道<time>中的日期是早于还是晚于今天的日期。

jQuery只会抽出当前日期，将其格式化为<time> date属性，然后减去所有内容。 然后，基于结果，将“旧”，“新”或“今天”类添加到每个元素。

希望对您有所帮助！

根据日期比较，使用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