检查当前日期是否被传递，然后使用循环执行一些操作

Question

我正在使用引导网格(没有数据报警器)，我想突出显示一个网格中有一个传递日期值。我找到了一个快速而肮脏的方法，但我确信有一个更好的解决办法来清理这件事。也许通过循环遍历.dates列中的网格。我尝试使用带有datetime属性的<time>，但我不确定这是否有帮助，以及如何获得这些日期并在循环中进行比较。

这是我的HTML：

<div class="container important-dates">
      <div class="row h-100">
          <div class="col-sm-5 my-auto impo">
            <h3><span>Important</span> Dates</h3>
          </div>
          <div class="col-sm-7 dates">
            <div class="row early-action">
                <div class="col-sm-5 date-label first">
                  <time datetime="2021-6-2">June 2</time>
                </div>
                <div class="col-sm-7 date-action">
                  <h4>Early Action</h4>
                </div>
            </div>
            <div class="row early-decision">
                <div class="col-sm-5 date-label">
                  <time datetime="2021-7-10">July 10</time>
                </div>
                <div class="col-sm-7 date-action">
                  <h4>Early Decision</h4>
                </div>
            </div>
            <div class="row regular-action">
                <div class="col-sm-5 date-label">
                  <time datetime="2021-9-2">Sept 2</time>
                </div>
                <div class="col-sm-7 date-action">
                  <h4>Regular Decision</h4>
                </div>
            </div>
            <div class="row open-house">
                <div class="col-sm-5 date-label">
                  <time datetime="2021-9-2">Oct 10</time>
                </div>
                <div class="col-sm-7 date-action">
                  <h4>Open House</h4>
                </div>
            </div>
          </div>
      </div>
  </div>

这是我的JS：

var currentDate = new Date();
var earlyAction = new Date();
var earlyDecision = new Date();
var regularDecision = new Date();
var openHouse = new Date();
earlyAction.setFullYear(2021, 5, 2);
earlyDecision.setFullYear(2021, 6, 10);
regularDecision.setFullYear(2021, 8, 2);
openHouse.setFullYear(2021, 9, 10);
// check if dates are passed
if (currentDate.getTime() > earlyAction.getTime()) {
  $('.early-action').addClass('date-has-passed');
}
if (currentDate.getTime() > earlyDecision.getTime()) {
  $('.early-decision').addClass('date-has-passed');
}
if (currentDate.getTime() > regularDecision.getTime()) {
  $('.regular-decision').addClass('date-has-passed');
}
if (currentDate.getTime() > openHouse.getTime()) {
  $('.open-house').addClass('date-has-passed');
}

它的工作很好，但有没有办法使这个更短，更干净？最好用jQuery。这是一把有用的小提琴。

Answer 1

您可以使用.each迭代您的time元素，然后获取它的属性，即: datatime，然后将其与currentDate进行比较，如果添加了类的话。

演示代码：

​

var currentDate = new Date();
//loop through time elemnt
$(".important-dates time").each(function() {
  var data_time = new Date($(this).attr("datetime")) //get data-attr
  //compare
  if (data_time < currentDate) {
    $(this).closest(".row").addClass("date-has-passed")//add class
  }
})

.date-has-passed {
  color: gray
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container important-dates">
  <div class="row h-100">
    <div class="col-sm-5 my-auto impo">
      <h3><span>Important</span> Dates</h3>
    </div>
    <div class="col-sm-7 dates">
      <div class="row early-action">
        <div class="col-sm-5 date-label first">
          <time datetime="2021-5-10">May 10</time>
        </div>
        <div class="col-sm-7 date-action">
          <h4>Early Action</h4>
        </div>
      </div>
      <div class="row early-decision">
        <div class="col-sm-5 date-label">
          <time datetime="2021-6-10">June 10</time>
        </div>
        <div class="col-sm-7 date-action">
          <h4>Early Decision</h4>
        </div>
      </div>
      <div class="row regular-action">
        <div class="col-sm-5 date-label">
          <time datetime="2021-9-2">Sept 2</time>
        </div>
        <div class="col-sm-7 date-action">
          <h4>Regular Decision</h4>
        </div>
      </div>
      <div class="row open-house">
        <div class="col-sm-5 date-label">
          <time datetime="2021-10-2">Oct 2</time>
        </div>
        <div class="col-sm-7 date-action">
          <h4>Open House</h4>
        </div>
      </div>
    </div>
  </div>
</div>

​

Answer 2

您可以在新日期中直接初始化日期，并在同一行中获取时间，并使用运算符&&进行比较，例如：

​

var currentDate = new Date().getTime();
var earlyAction = new Date(2021, 5, 2).getTime();
var earlyDecision = new Date(2021, 6, 10).getTime();
var regularDecision = new Date(2021, 8, 2).getTime();
var openHouse = new Date(2021, 9, 10).getTime();

var date_has_passed = 'date-has-passed';

// check if dates are passed
$('.early-action').addClass(currentDate > earlyAction && date_has_passed );
$('.early-decision').addClass(currentDate > earlyDecision && date_has_passed);
$('.regular-decision').addClass(currentDate > regularDecision && date_has_passed);
$('.open-house').addClass(currentDate > openHouse && date-has-passed);

.date-has-passed {
color: green;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container important-dates">
          <div class="row h-100">
              <div class="col-sm-5 my-auto impo">
                <h3><span>Important</span> Dates</h3>
              </div>
              <div class="col-sm-7 dates">
                <div class="row early-action">
                    <div class="col-sm-5 date-label first">
                      <time datetime="2021-6-2">June 2</time>
                    </div>
                    <div class="col-sm-7 date-action">
                      <h4>Early Action</h4>
                    </div>
                </div>
                <div class="row early-decision">
                    <div class="col-sm-5 date-label">
                      <time datetime="2021-7-10">July 10</time>
                    </div>
                    <div class="col-sm-7 date-action">
                      <h4>Early Decision</h4>
                    </div>
                </div>
                <div class="row regular-action">
                    <div class="col-sm-5 date-label">
                      <time datetime="2021-9-2">Sept 2</time>
                    </div>
                    <div class="col-sm-7 date-action">
                      <h4>Regular Decision</h4>
                    </div>
                </div>
                <div class="row open-house">
                    <div class="col-sm-5 date-label">
                      <time datetime="2021-9-2">Oct 10</time>
                    </div>
                    <div class="col-sm-7 date-action">
                      <h4>Open House</h4>
                    </div>
                </div>
              </div>
          </div>
      </div>

​