javascript - 如何在特定日期使 div 过期？

Question

我有 75 个 div，我需要在不同的日期过期。我找到了一个js代码来做到这一点。但是当把代码应用到大量的div上时，可能会非常困难。我可以简单地应用下面的代码吗？如果有什么建议欢迎补充。

这是我找到的代码。

window.onload = function() {

  var current = new Date();
  var expiry = new Date("August 07, 2018 12:00:00")
  var expiry2 = new Date("August 09, 2018 12:00:00")

  if (current.getTime() > expiry.getTime()) {
    $('#one').hide();
    $('#two').show();
    $('#three').show();
  } else if (current.getTime() > expiry2.getTime()) {
    $('#one').show();
    $('#two').hide();
    $('#three').show();
  }
};

$('#one').show();
$('#two').show();
$('#three').show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one" style="display:none">
  <p>content for div #one</p>
</div>
<div id="two" style="display:none">
  <p>content for div #two</p>
</div>
<div id="three" style="display:none">
  <p>content for div #three</p>
</div>
<div id="four" style="display:none">
  <p>content for div four</p>
</div>
<div id="five" style="display:none">
  <p>content for div five</p>
</div>

jfiddle

Answer 1

这是使用 jQuery 进行优化的方法:

我们通过添加 data-expiry="August 07, 2018 12:00:00" 为每个 div 分配了到期日期，然后从 javascript 中检索它以与当前的进行比较时间。

我们还为每个 div 添加了一个类，在本例中我使用了 with-expiry，这样可以很容易地获取所有 div 并循环每个 div。

使用这种方法，您的实现将很灵活并且代码会很短。

$(function() {

  var current_date = new Date();

  $(".with-expiry").each(function() {
    var div_date = $(this).data('expiry');

    // wrap in Date class
    div_date = new Date(div_date);

    if (current_date.getTime() > div_date.getTime()) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });



})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="one" class="with-expiry" style="display:none" data-expiry="August 07, 2018 12:00:00">
  <p>content for div #one</p>
</div>
<div id="two" class="with-expiry" style="display:none" data-expiry="August 08, 2018 12:00:00">
  <p>content for div #two</p>
</div>
<div id="three" class="with-expiry" style="display:none" data-expiry="August 09, 2018 12:00:00">
  <p>content for div #three</p>
</div>
<div id="four" class="with-expiry" style="display:none" data-expiry="August 10, 2018 12:00:00">
  <p>content for div four</p>
</div>
<div id="five" class="with-expiry" style="display:none" data-expiry="August 11, 2018 12:00:00">
  <p>content for div five</p>
</div>

这是一个 JS fiddle :

https://jsfiddle.net/xpvt214o/569177/