Question

尝试显示/隐藏div（如果日期已按班级而非ID过期）。

HTML

<div class="test">
<input type="date" class="date-input" value="2022-09-14" />
</div>

<div class="test">
<input type="date" class="date-input" value="2018-09-11" />
</div>

jQuery

window.setInterval(function() {

  var current = new Date();
  var expiry = new Date($('.date-input').val());

  if (current.getTime() > expiry.getTime()) {
    $('.date-input').parents('div').hide();

  } else if (current.getTime() < expiry.getTime()) {
    $('.date-input').parents('div').show();
  }

}, 0);

请参阅：https://jsfiddle.net/qhgrtwzm/832/

在此示例中，由于第一个日期尚未过期，因此显示了两个div。如何在不使用ID的情况下将显示/隐藏应用于每个单独的div？

我们将竭诚为您提供任何帮助。谢谢。

编辑-万一有人想知道我将如何使用此代码...我想使事件在日期到期时消失。请参阅：https://www.citychurchchristchurch.co.nz/events

Answer 1

window.setInterval(function() {

  var current = new Date();

  $('.date-input').each(function(){
    var jqDiv = $(this).parent('div');
    if (current > new Date($(this).val())) {
      jqDiv.hide();
    } else {
      jqDiv.show();
    }
  });

}, 0);

Answer 2

如何使用过滤器功能。

在下面运行代码段

window.setInterval(function() {
$(".date-input" ).show();
$( ".date-input" )
  .filter(function( index ) {
    return new Date() >  new Date($(this).val()) 
  }).parent('div').hide();
}, 0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<input type="date" class="date-input" value="2022-09-14" />
</div>

<div class="test">
<input type="date" class="date-input" value="2018-09-11" />
</div>

如果日期已按类别（而非ID）过期，则删除父div

2 个答案: