Javascript 在过去或将来的日期添加类

我对一些partyevents（一些在同一天）有一个概述。 我需要按当前日期和时间对它们进行排序。 当一个事件完成时，它需要进入旧事件列表

我认为如何做到这一点是，当一个事件发生在过去或未来时，基于当前时间，使用javascript添加一些类。它需要通过标题或其他属性知道事件的日期和时间。（通过这种方式，我可以在向上提交事件列表中添加过去的类时使用display:none，在旧的事件中使用add display:block。）

即将举行的派对活动： -在此列出

旧事件： -在此列出

我已经搜索了allot，但找不到任何有用的脚本。

---

也许有人能帮我吗？

你应该彻底调查一下knockout.js@

一旦你知道它是如何工作的，你就会爱上它

编辑：

更多信息： 您将使用ObservalArrays，它将在您修改后立即触发knockout来为您更改HTML（例如sort）——这是惊人的，对吗

编辑2：

Stack overflow也支持敲除，所以问题很可能得到解答

因此，knockout使用绑定到视图的viewmodel。 在这个viewmodel中，您将有一个partyList（在我的示例中称为parties），它是一个observableArray。 viewmodel的格式可以如下所示：

var viewmodel = function(){
    self = this;        
    self.parties = ko.observableArray([{ name: "Halloween", date: "2014/10/31" },{ name: "Christmas", date: "2014/12/25" }]);
    self.sortParties = function(){
        self.sortParties().sort(function(a, b){
            //here comes the sorting logic you want to apply
        }
    });
};

ko.applyBindings(new viewmodel());

HTML可以是这样的：

<div data-bind="foreach: parties">
    <div data-bind="text: name" />
    <div data-bind="text: date" />
</div>
<button data-bind="click: sort">Sort</button>

分类

这个HTML首先为parties数组中的每个事件呈现两个内部div（在本例中为2），并显示名称和日期

如果用户单击该按钮，则将调用sort方法。关于knockout的好处是，无论数组中的对象的顺序如何，都将在HTML中准确地表示出来，而无需单击按钮执行任何其他操作。我提供的代码是实现此功能所需的一切（当然包括淘汰脚本）

---

要添加新的派对吗？没问题，向viewmodel添加一个add方法，该方法将向parties添加一个party，它将显示在HTML中。

您可以使用引用的date（）在JavaScript中获取当前日期

然后，您可以检查事件的日期是在当前日期之前还是之后，并根据需要添加要隐藏的类

---

就JavaScript的排序而言，重建轮子毫无意义，这对我来说太棒了。简单易用且非常轻量级。

我认为应该使用PHP对它们进行排序。javascript非常复杂，因为您无法将元素移动到DOM中的另一个位置

<div id="events">
//elements are positioned here
</div>
<div id="new-events">
//you can't simply move the elements to here
</div> 
<div id="new events">
//or to here
</div>

//元素位于此处
//您不能简单地将元素移动到此处
//还是到这里

但是您可以将PHP与一系列事件及其时间一起使用

<?php 
$events = array('2014-11-1' => array('title' => 'Haloween Party', 'date' => '2014-11-1'), '2014-10-10' => array('title' => 'Table dance party', 'date' => '2014-10-10'));
function only_new($name) {
    $date = strtotime($name['date']);
    return $date > time() ? $name : false;
}
$newEvents = array_filter($events, "only_new");
$oldEvents = array_filter($events, "only_old");
function only_old($name) {
    $date = strtotime($name['date']);
    return $date < time() ? $name : false;
}

echo '<hr>';
echo 'Old events:<br />';
var_dump($oldEvents);
echo '<br />';
echo '<hr>New events:<br />';
var_dump($newEvents);
echo '<hr>';
?>

---

希望有帮助；）

谢谢，我能很好地使用php。我正在测试这个，但是你必须使用类似var_dump（$oldEvents）的东西；var_dump（$newEvents）；哦，天哪，我真的很烂。什么也看不出来。需要展示万圣节派对吗？是的，应该。我将在本地主机上测试它。等等，它起作用了。你可以在网站上看到一个例子，我将日期格式修改为（YY-MM-DD），大大超过了我的技能：（谢谢桑德，我会试试。）祝你好运！别忘了下载所需的脚本，并将其包含在您的页面中！此外，那里的文档非常好，因此如果您遇到困难，我建议您阅读基础知识