Javascript setInterval以显示/隐藏类的特定实例

根据唯一的开始/结束时间，我有一组要隐藏/显示的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（函数（）{
var currentTime=new Date（）.getTime（）；
if（$（'.action item wrapper'）.attr（'data-startTime'）

上面的切换可以上下滑动所有内容。下面什么都没做

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（函数（）{
var currentTime=new Date（）.getTime（）；
if（$（'.action项包装器'）.attr（'data-startTime'）>currentTime）{
$（this.slideDown（）；
}
if（$（'.action项包装器'）.attr（'data-endTime'）

---

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

您正在尝试读取并比较所有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);

setInterval（函数（）{
var currentTime=new Date（）.getTime（）；
//迭代所有操作项包装器
$（'.action项包装器'）。每个（函数（）{
//将开始和结束时间与当前日期进行比较
if（$（this）.data（'starttime'）>=当前时间）{
$（this.slideDown（）；
}
如果（$（this）.data（'endtime'）可能是您的意思。请注意，数据属性名称必须全部为小写


$（函数（）{
setInterval（函数（）{
var$wrapper=$（'.action-item-wrapper'），
currentTime=新日期（）.getTime（）；
$wrapper.each（函数（）{
var startTime=$（this）.data（“startTime”），
endTime=$（this）.data（“endTime”）；
如果（currentTime>=startTime&¤tTimeA建议：使用
.data（）
语法，如
.data（'startTime'）
来读取数据属性，因为这样既可以简化读取，又可以自动将其转换为数字，因此可以将数字与数字进行比较，而不是将字符串与数字进行比较。此外，您不想调用
.slideDown（）
或
.slideUp（）
一遍又一遍。您只需在调用
.slideUp（）
之后，最多调用它们一次，就可以停止间隔。由于某种原因，当我使用.data（）而不是.attr（）时，它根本不起作用……不确定是否与setInterval有关，或者是什么，但是……
.data（）
在读取数据xxx属性时不处理混合大小写名称。与间隔无关。啊，这可能是问题所在！谢谢！我想这就是我想要的-但我遇到了一个错误，计时器不再显示（脚本位于我放置此项的下方）…我看不到语法错误，但我对iteration@Lauren，尝试增加计时器。假设使用计时器值5000进行尝试。增加计时器似乎不起作用。但另一个答案确实起作用。谢谢您的帮助！这是基于计时器的，但它仍然显示/隐藏具有相同类别的所有div根据需要删除每个div。我的解决方案原则上与Bhushan的相同，尤其是现在他还使用
数据
，而不是
attr
，并将属性小写。如果我删除了外部函数，它就可以工作了……我需要保留它吗？外部函数是在页面加载时执行的。如果您已经有了$（文档）。准备就绪或类似，在外部函数中插入我的脚本时将其删除