7

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

我的问题是，如果我从一些 javascript 函数动态更改 abrr.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 函数，但结果总是相同

4

5 回答 5

13

更新 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");

希望这是你需要的！

于 2011-02-04T14:48:49.010 回答
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()));
});
于 2013-11-23T13:08:27.283 回答
1

除了这个，不要添加任何 javascript 或 jquery 代码；

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

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

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

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

于 2013-07-28T13:48:23.343 回答
0

在更改 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"));
于 2011-02-04T14:54:07.150 回答
0

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

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

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

于 2016-09-23T14:26:52.667 回答