jQuery timeago 用法

Question

我的 HTML 中有一个 <abbr> 标记，其类为“timeago”。当我在页面加载时设置它的值时，然后在文档就绪功能上调用jQuery("abbr.timeago").timeago(); 它可以工作。

我的问题是，如果我从某个 javascript 函数中动态更改 abbr.timeago 标题，我怎样才能让 timeago 插件在更新后的 abrr.timeago 元素上发挥它的魔力？

我应该调用哪个函数？我应该从文档准备功能中删除jQuery("abbr.timeago").timeago(); 还是保留它？谢谢

编辑问题：

@squiddy 示例有效，仅更新一次时间，并且保持不变。例如，如果我将 timeago 设置为 current time .. 那么它就像它不会改变一样？

赏金更新：

请忽略之前的问题。在我的网站中，点击 getJSON 函数时有一个链接，该函数将一些信息从服务器获取到表中。

每一行代表来自服务器的反馈。这是我的 getJSON 伪代码：

            $.getJSON("feedback/" + feedbackId, function(data) {
            var column ... declared variable in which column selector
        .... some logic that populates table(irrelevant)
            //Store last checked time in title
        column.attr("title", iso8601(new Date()));
            //invoke timeago on this title
        column.html(jQuery.timeago(iso8601(new Date())));
            ....iso8601 is date format function
    });

因此，对于我从服务器获得的每个反馈（n 次），都会调用这个 getJSON。当 json 完成时，表中的相应列将填充最后更新时间。

但似乎 timeago 没有读取更改的标题值，它无法识别更新的 DOM。我为来自服务器的每个反馈放置了一个 console.log(element.attr("title")) 用于调试目的，只是为了查看我是否将 title 属性设置为当前时间，确实如此，但 timeago 会选择最初加载的标题价值。

怎么办我也试过这个版本：

$.getJSON("feedback/" + feedbackId, function(data) {
                var column ... declared variable in which column selector
            .... some logic that populates table(irrelevant)
                //Store last checked time in title
            column.attr("title", iso8601(new Date()));
                //invoke timeago on this title

                $(column).livequery(function() {
                $(this).timeago(iso8601(new Date()));
                console.log($(this).attr("title"));
            });  
        });

我花了几个小时尝试了几种可能的解决方案 .. 比如每隔 n 秒调用一次的函数，调用 timeago 函数，但结果总是相同

Answer 1

更新 2：同样的技巧在这里有效。元素column 之前被timeago 转换过一次，当这种情况发生时，timeago 在元素上放置了一个'timeago' 数据字段。当此数据字段存在时，timeago 不会打扰它，因此您必须清除它。代码看起来像这样：

$.getJSON("feedback/" + feedbackId, function(data) {
    var column 
    // ... declared variable in which column selector
    // ... some logic that populates table(irrelevant)
    // Store last checked time in title
    column.attr("title", iso8601(new Date()));
    // invoke timeago on this title
    column.data("timeago",null).timeago();
    // ... iso8601 is date format function
});

更新：更正，测试，诀窍是，timeago插件标记已经转动的元素，并且不要让它们再次转动，除非标记被清除

当您更改 abbr.timeago 中的值时，您应该只在该元素上再次运行 timeago() 函数。我会为此推荐一些功能：

$.fn.changeTimeago = function(isotime) {
    return $(this).attr("title",isotime).data("timeago",null).timeago();
}

// usage:
$("abbr.timeago").changeTimeago("2004-07-17T09:24:17Z");

希望这是您所需要的！

Answer 2

从 v1.1.0 开始，jquery.timeago.js 现在提供了一个可以使用的update 操作：

发件人：https://github.com/rmm5t/jquery-timeago/pull/115

$(column).livequery(function() {
  $(this).timeago('update', iso8601(new Date()));
});

Answer 3

除此之外不要添加任何 javascript 或 jquery 代码；

$('.timeago').timeago();

然后添加“Z”（或包括 T）。欲了解更多信息，请访问link

<abbr class='timeago' title='2011-09-09 10:10:10Z'></abbr>

http://en.wikipedia.org/wiki/ISO_8601#Combined_date_and_time_representations

Answer 4

更改 title 属性中的值后我无法让它工作，但 timeago 支持这样的直接方法：

jQuery.timeago(new Date());             //=> "less than a minute ago"
jQuery.timeago("2008-07-17");           //=> "2 years ago"
jQuery.timeago(jQuery("abbr#some_id")); //=> "2 years ago" [title="2008-07-20"]

所以在更改元素时，自己更新html：

jQuery("abbr.timeago").html(jQuery.timeago("2010-07-17T09:24:17Z"));

Answer 5

如果您希望使用新日期更新 timeago 元素。最简单的方法如下 -

$('abbr.timeago').timeago('update',(new Date()).toISOString());

它就像一个魅力。我不明白为什么它没有在任何地方记录。您可以通过查看 timeago javascript 代码找到此功能。