使用jquery或JavaScript基于“Created Date”属性创建单选按钮过滤器

我目前正在通过定制的内容查询Web部件加载许多列表项

与这些项中的每个项关联的XSLT属性是创建日期

下面是一个加分的例子

<div class="item" createddate="2014-01-22 13:02:52" language="French">Content</div>
<div class="item" createddate="2014-01-28 13:02:52" language="German">Content</div>
<div class="item" createddate="2013-12-18 13:02:52" language="Italian">Content</div>

我需要做的是创建一个单选按钮过滤器，其中的值为：

过去30天 过去90天 当选择这些单选按钮中的任何一个时，它将根据其日期值隐藏和显示项目

如何通过jquery/javascript创建过滤器，根据创建日期隐藏和显示这些项目

任何帮助都将不胜感激。

使用新的日期时间字符串解析createddate属性，从今天的新日期中减去它，并将其转换为天

Chrome可以正确解析现有的日期时间格式；Firefox目前没有。你需要用T而不是空格来分隔日期和时间。如果您的HTML是不可变的，我们可以在JavaScript中进行更改：

$('.radioclass').on('change', function (e) {
    $radio = $(this);
    $('.item').hide().filter(function (i, el) {
        var datestr = $(el).attr('createddate').replace(' ', 'T'); //ISO-8601
        var createddate = new Date(datestr);
        var nowdate = new Date();
        // subtracting dates returns a number in milliseconds
        var diffdays = Math.floor((nowdate - createddate) / (1000*60*60*24));
        return (diffdays <= $radio.val());
    }).show();
});

---

我想你可以用js做一些逻辑，但是为什么不使用jQuery呢？我建议你用这个。确保在脚本之前加载它

利用矩，我们可以得到当前时间，并确定它是否在设定日期之前

var t = moment();

$(document).ready(function() {
    $(".items").hide();

    var i = t.duration(30, 'd');
    var o = t.duration(90, 'd');
    var thirtyday = t.add(i);
    var ninetyday = t.add(o);

    $(".items").each(function() {
        var a = $(this).attr("createddate");
        var d = moment(a, "YYYY-MM-DD HH:MM:SS");
        if(d.isAfter(thirtyday) && d.isBefore(ninetyday)) {
            $(this).addClass("lastninetydays").addClass("lastthirtydays");
        }
    });
});

然后，您可以显示/隐藏这些项目，这些项目具有基于radio值的类

如果添加时间刻度，则可以获得更动态的结果

var t = moment();

setInterval(function() {
    t = moment();
    updateListItems();
    radioChange($(".radio").val());
}, 1000);

$(document).ready(function() {
    $(".items").hide();

    var i = t.duration(30, 'd');
    var o = t.duration(90, 'd');
    var thirtyday = t.add(i);
    var ninetyday = t.add(o);

    $(".radio").change(function() {
        radioChange($(this).val());
    }
});

function updateListItems () {
    $(".items").each(function() {
        var a = $(this).attr("createddate");
        var d = moment(a, "YYYY-MM-DD HH:MM:SS");
        if(d.isAfter(thirtyday) && d.isBefore(ninetyday)) {
            $(this).addClass("lastninetydays").addClass("lastthirtydays");
        }
    });
}

function radioChange (val) {
    //show/hide list items based on what the radio value is.
}

---

使用new Datedate时间字符串分析createddate属性，从今天的new Date中减去该属性，将其转换为天。new Date$el.attr'createddate'在尝试创建它时会导致无效日期。这不是对象的有效输入字符串。@talemyn不适用于我。你在用什么浏览器？嗯。当我测试这些值时，它没有给出一个有效的日期。有趣的我不能检查你的小提琴。网站被防火墙封锁了。从我所看到的，它被日期的格式阻塞了。它不喜欢2014-01-22，但对2014/01/22没问题。Blazemonger-谢谢你。小提琴看起来很棒，我现在就在我的环境中试试。从新手的角度来看，i和el在filter函数中是做什么的？谢谢你突出显示。看起来棒极了。不幸的是，我无法在codepen环境中实现上述功能。谢谢你的回复。图书馆看起来很漂亮。