Question

我想要隐藏/显示一组div，具体取决于独特的开始/结束时间。开始/结束时间作为数据属性存储在div中，如下所示：

<div class="action-item-wrapper " data-startTime="1452157793000" data-endTime="1452157796000">

我尝试使用setInterval检查是否应显示或隐藏任何div。我尝试过以下方法：

setInterval(function() {
    var currentTime = new Date().getTime();
    if ( $('.action-item-wrapper').attr('data-startTime') < currentTime ) {
            $('.action-item-wrapper').slideDown();
    }
    if ( $('.action-item-wrapper').attr('data-endTime') < currentTime ) {
            $('.action-item-wrapper').slideUp();
    }
}, 1000);

以上只是切换上下滑动所有内容。以下没有做任何事情。

setInterval(function() {
    var currentTime = new Date().getTime();
    if ( $('.action-item-wrapper').attr('data-startTime') > currentTime ) {
            $(this).slideDown();
    }
    if ( $('.action-item-wrapper').attr('data-endTime') < currentTime ) {
            $(this).slideUp();
    }
}, 1000);

如何使用setInterval（或其他等效项）检查div是否应该处于活动状态并在结束时间后隐藏？

Answer 1

您正在尝试阅读并比较所有div的开始时间和结束时间。相反，你需要迭代它们以比较开始/结束时间然后显示/隐藏，检查下面的代码

HTML：仅小写的数据属性

<div class="action-item-wrapper " data-starttime="1452157793000" data-endtime="1452157796000">

jQuery：

setInterval(function() {
    var currentTime = new Date().getTime();
    //iterate all action item wrapper
    $('.action-item-wrapper').each(function(){
        //compare start and end time with current date
        if ( $(this).data('starttime') >= currentTime ) {
            $(this).slideDown();
         }
        if ( $(this).data('endtime') <= currentTime ) {
            $(this).slideUp();
        }
    });

}, 1000);

Answer 2

也许你的意思是这个。请注意，数据属性名称必须全部小写

enctype="multipart/form-data"

$(function() {
  setInterval(function() {
    var $wrapper = $('.action-item-wrapper'),
    currentTime = new Date().getTime();
    $wrapper.each(function() {
      var startTime = $(this).data("starttime"),
          endTime = $(this).data("endtime");
      if (currentTime >= startTime && currentTime<=endTime) {
        $(this).slideDown();
      }
      else $(this).slideUp();
    });
    }, 1000);
});

setInterval显示/隐藏类

2 个答案: