我的 div 中有 4 个不同的日期我需要将活动颜色应用于最近的未来日期？答案

【问题标题】：I have 4 different dates here in my div I need to apply active color to most recent future date?我的 div 中有 4 个不同的日期我需要将活动颜色应用于最近的未来日期？
【发布时间】：2018-09-06 18:24:18
【问题描述】：

我们这里有 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 sn-p 来执行此操作吗？

Javascript sn-p

$(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;
}

【问题讨论】：

到目前为止你尝试过什么？愿意分享一些 JS 代码吗？
到目前为止你有没有尝试过？ StackOverflow 不是免费的代码编写服务，希望您能try to solve your own problem first。请更新您的问题以显示您已经尝试过的内容，并在minimal, complete, and verifiable example 中显示您面临的具体问题。欲了解更多信息，请参阅how to ask a good question，并拨打tour of the site
这是我的 jquery 和 css sn-p
$(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'); } }); });
.grid-item { 高度：170px;宽度：170px；向左飘浮;背景：红色；边距：10px； } .past { 背景：黑色； } .future { 背景：蓝色； }

标签： javascript jquery html date colors

【解决方案1】：

您可以获取所有日期并将其存储在数组中。

然后将.red 类添加到所有.grid-item。过滤与date元素0具有相同日期的div。并删除类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 内容只是日期，您可以：

//Get the dates and sort it
var date = $(".grid-item").map(function() {return $(this).text().trim()}).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).text().trim() === date[0];
}).removeClass('red').addClass('green');

.grid-item {
  border: 1px solid black;
  width: 100px;
  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">2018-03-30</div>
<div class="grid-item">2018-04-29</div>
<div class="grid-item">2015-05-25</div>
<div class="grid-item">2015-07-26</div>

仅使用月份和日期（使用当前年份）

var date = $(".grid-item").map(function() {return $(this).text().trim()}).get().sort(function(a, b) {
  var f = function(d) {[m, d] = d.split("-");return [(new Date()).getFullYear(), 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).text().trim() === date[0];
}).removeClass('red').addClass('green');

【讨论】：