使用jQuery,我怎样才能将文本加载到多个.classes而不是#id的?

时间:2013-09-08 09:10:06

标签: javascript jquery ajax

在我的网站上,我有一个评论表,告诉你多久以前评论的发布 下面是一个代码,只重新加载包含每10秒日期的跨度,整个注释div(以防止页面滞后)

$(function(){
     setInterval(
     function(){ 
     var id = $('.date').html();
     $('.date').load('/comdate.php?id=' + id); }
     ,10000);
});

我的功能不起作用,我真的不想为每个评论的日期字段创建一个单独的函数。请有人指出我的问题吗?感谢

修改
我在javascript中使用它将时间更改为可读日期

   function prettyDate(time){
    var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);

    if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
        return;

    return day_diff == 0 && (
            diff < 60 && "just now" ||
            diff < 120 && "1 minute ago" ||
            diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
            diff < 7200 && "1 hour ago" ||
            diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
        day_diff == 1 && "Yesterday" ||
        day_diff < 7 && day_diff + " days ago" ||
        day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

// If jQuery is included in the page, adds a jQuery plugin to handle it as well
if ( typeof jQuery != "undefined" )
    jQuery.fn.prettyDate = function(){
        return this.each(function(){
            var date = prettyDate(this.title);
            if ( date )
                jQuery(this).text( date );
        });
    };

这会返回GMT + 1,因为那就是我。如何更改此功能以使javascript时区GMT也是如此?

3 个答案:

答案 0 :(得分:4)

对我来说,我会改变我的ajax请求只发送一次unix时间,我会在javascript中完成所有计算。

var periods = ["second", "minute", "hour", "day", "week", "month", "year", "decade"];
var lengths = ["60","60","24","7","4.35","12","10"];

function nicetime(user_date)
{
    if(typeof user_date == "undefined" ) {
        return "No date provided";
    }

    var now  = new Date().getTime();
    var unix_date = user_date;

    // check validity of date
    if(unix_date == "") {   
        return "Bad date";
    }

    // is it future date or past date
    if(now > unix_date) {   
        var difference = now - unix_date;
        var tense = "ago";
    } else {
        var difference = unix_date - now;
        var tense      = "from now";
    }
    difference = difference/1000; //from milliseconds to seconds;
    for(var j = 0; difference >= lengths[j] && j < lengths.length-1; j++) {
        difference /= lengths[j];
    }

    difference = Math.round(difference);

    if(difference != 1) {
        periods[j] += "s";
    }

   return difference+" "+periods[j]+" "+tense;
}


console.log(nicetime(1378632182334));

示例:

http://jsfiddle.net/F6H2w/

注意 我在你的功能中唯一改变的是:

difference = difference/1000; //from milliseconds to seconds;

你的代码处理差异变量,以毫秒为单位,以秒为单位。

答案 1 :(得分:2)

@ra_htial在他的第一个评论中提出的建议听起来是最好的,因为它不会不必要地使用javascript在客户端管理的请求轮询服务器。所以我的建议是在data-date span元素中添加一个.date属性,其中包含普通格式的日期和时间,可以在javascript中解码并用于更新人类可读日期。 / p>

以下是静态数据html的外观:

<span class="date" data-date="2013-09-08 12:37">1 min ago</span>

或从您的php脚本输出:

<span class="date" data-date="<?php echo $date; ?>"><?php echo nicetime($date); ?></span>

这里是更新日期内容的javascript(我使用了本文http://www.zachleat.com/web/yet-another-pretty-date-javascript/中的格式化功能,但还有其他替代方案,如John Resig&#39; s Pretty Date):< / p>

setInterval(function()
{ 
    $('.date').each(function()
    {
        var $this = $(this);
        $this.html(humane_date($this.data('date')));
    });
}, 10000);

修改

这是一个说明功能http://jsfiddle.net/FXERS/的小提琴。您需要将小提琴中其中一个元素的data-date属性更改为当前时间才能看到它更新。

答案 2 :(得分:0)

看起来您不能在多个元素上使用.load()方法,但您可以将日期提取到变量中,然后更新所有其他元素:

$.get('/comdate.php?id=' + id, function(data) {
    $('.date').each( function() { $(this).html(data); } );
});

更新所有元素。虽然在上面的评论中已经指出,但是你没有在JS中做一些你无法做的事情。

编辑添加在JavaScript中查找Date对象,它可以获取当前时间并解析它 - 函数中的其他所有内容都只是逻辑,易于翻译。