我的div中有4个不同的日期我需要将活动颜色应用到最近的未来日期吗？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的div中有4个不同的日期我需要将活动颜色应用到最近的未来日期吗？相关的知识，希望对你有一定的参考价值。
我们这里有4个不同的日期
<div class="grid-item" data-date="2018-03-30"></div>
<div class="grid-item" data-date="2018-04-29"></div>
<div class="grid-item" data-date="2015-05-25"></div>
<div class="grid-item" data-date="2015-07-26"></div>
最近的日期应该是活动类，未来和旧日期应该是非活动类
例如
<div class="grid-item" data-date="2018-03-30"></div>
以上<div>应该是green颜色和其他3 divs应该是red颜色
<div class="grid-item" data-date="2018-04-29"></div>
<div class="grid-item" data-date="2015-05-25"></div>
<div class="grid-item" data-date="2015-07-26"></div>
我需要javascript或jquery片段才能执行此操作？
Javascript代码段
$(function() {
var currentDate = Date.now();
var a = new Date(currentDate);
$(".grid-item").each(function() {
var specifiedDate = $(this).data('date');
var date = Date.parse(specifiedDate);
var b = new Date(date);
if (!isNaN(b) && b.getMonth() == a.getMonth() && b.getDay()==
a.getDay() && b.getYear() == a.getYear()) {
$(this).addClass('today');
}
else if(!isNaN(b) && a - b > 0) {
$(this).addClass('past');
}
else {
$(this).addClass('future');
}
});
});
CSS
.grid-item {
height: 170px;
width: 170px;
float: left;
background:red;
margin:10px;
}
.past {
background:black;
}
.future {
background:blue;
}
答案
您可以获取所有日期并将其存储在阵列中。
然后将类.red添加到所有.grid-item。使用div元素0过滤与日期相同的date。并删除类red添加类green
//Get the dates and sort it
var date = $(".grid-item").map(function(){ return $(this).data('date') }).get().sort(function(a,b){
var f = function(d){[y,m,d] = d.split("-");return [y,m,d];}
var t = new Date();
return Math.abs( t.getTime() - new Date(...f(a)).getTime() ) - Math.abs( t.getTime() - new Date(...f(b)).getTime() );
});
//Assign Class
$(".grid-item").addClass('red').filter(function(){
return $(this).data('date') === date[0];
}).removeClass('red').addClass('green');.grid-item {
border: 1px solid black;
width: 50px;
height: 50px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-item" data-date="2018-03-30"></div>
<div class="grid-item" data-date="2018-04-29"></div>
<div class="grid-item" data-date="2015-05-25"></div>
<div class="grid-item" data-date="2015-07-26"></div>以上是关于我的div中有4个不同的日期我需要将活动颜色应用到最近的未来日期吗？的主要内容，如果未能解决你的问题，请参考以下文章