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并循环遍历。

使用这种方法，您的实现将很灵活，代码也很简短。

$(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小提琴：

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

Answer 2

您需要为每个div设置一个attibute，以确定每个div的到期日期。

我的示例是使用data-expire设置到期日期。

在onload方法中，我检查每个div的data-expire，以将过期的和未过期的分开。

我使用红色字眼使它们清晰可见，以区别于其他内容。

window.onload = function(){

      var current = new Date();
      
      $('.date').each(function(index, event){
        var expire = $(this).data('expire');
        var expireDate = new Date(expire);
        if(expireDate.getTime() <= current.getTime()){
          $(this).css('color', 'red').show();
        }
        else{
          $(this).css('color', 'black').show();
        }
      })
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>Red means that date is expired</span>

<div class="date" data-expire="2018-08-01" style="display:none">
    <p>content for div 2018-08-01</p>
</div>
<div class="date" data-expire="2018-08-02" style="display:none">
    <p>content for div 2018-08-02</p>
</div>
<div class="date" data-expire="2018-08-03" style="display:none">
    <p>content for div 2018-08-03</p>
</div>
<div class="date" data-expire="2018-08-04" style="display:none">
    <p>content for div 2018-08-04</p>
</div>
<div class="date" data-expire="2018-08-05" style="display:none">
    <p>content for div 2018-08-05</p>
</div>
<div class="date" data-expire="2018-08-06" style="display:none">
    <p>content for div 2018-08-06</p>
</div>
<div class="date" data-expire="2018-08-07" style="display:none">
    <p>content for div 2018-08-07</p>
</div>
<div class="date" data-expire="2018-08-08" style="display:none">
    <p>content for div 2018-08-08</p>
</div>
<div class="date" data-expire="2018-08-09" style="display:none">
    <p>content for div 2018-08-09</p>
</div>
<div class="date" data-expire="2018-08-10" style="display:none">
    <p>content for div 2018-08-10</p>
</div>

Answer 3

您可以使用类进行相同的操作，示例如下：

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")

  $(".divON").show();
  if (current.getTime() > expiry.getTime()) {
    $('#one').hide();

  } else if (current.getTime() > expiry2.getTime()) {
    $('#two').show();

  }
};

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

Answer 4

   <div id="div0" style="display:none">
            <p>content for div #one</p>
            </div>
            <div id="div1" style="display:none">
            <p>content for div #two</p>
            </div>
            <div id="div2" style="display:none">
            <p>content for div #three</p>
            </div>
            <div id="div3" style="display:none">
            <p>content for div four</p>
            </div>
            <div id="div4" style="display:none">
            <p>content for div five</p>
            </div>

    <script>
//keep your expire dates in an array in your desired format
   var desiredExpiryDates = [.,......,.,.]

        function expire(){                          
            for(var i=0;i< desiredExpiryDates.length;i++ ){

// find current date and  compare desiredExpiryDates in desired way & compare

            if(currentdate === desiredExpiryDates[i] ){  
            $('#div'+i).hide()
            } else{
            $('#div'+i).show()
            }
            }

   // settimeout callback to check and compare within desired time interval
        setTimeout(expire, 1000);
        }
    </script>

div在特定日期如何过期？

4 个答案: