Question

我正在创建一个基本论坛，其中每条消息都包含作者姓名，一些文本及其创建日期。我希望论坛能够通过AJAX不断更新，并显示即时创建的新帖子。我目前有一个PHP文件getlatest.php?lastid=...，它从最新的ID中检索所有帖子。它以HTML格式返回数据（我已经对其进行了更改，因此您可以看到div，stackoverflow将它们抛出）：


foreach ($print as $value)
{
    $readyText .= div id = $value->post_id;
    $readyText .= $value->first_name.' '.$value->last_name.' posted the following:'.
    $value->post_text.' The post was made about '.$time.' ago. 
    $readyText .= '/div>'; 
}



I have some AJAX code in jquery that retrieves every few moments


setInterval("update()", 3000);
            function update()
            {
                $.get("getlatest.php", 
                {
                    id: latestmessage
                }, 
                function(response){
                    $("#forum_entries").prepend(response);
                    latestmessage = $.cookie('last_post_id'); //This is
                                      //how I know what the latest post id is
                }, "html");


I wanted to highlight all the new posts that were submitted using the (now very popular) yellow fade technique, like so


setInterval("update()", 3000);
            function update()
            {
                $.get("getlatest.php", 
                {
                    id: latestmessage
                }, 
                function(response){
                    $("#forum_entries").prepend(response);
                    latestmessage = $.cookie('last_post_id'); //This is
                                      //how I know what the latest post id is
                }, "html");

我的问题是 - 我应用这个效果的div是什么？我应该在PHP中添加它，每个论坛帖子都有一个div id，实际上它是数据库中的PK。

Answer 1

更改您的功能，使其不使用前置，而是使用prependTo。 PrependTo将返回前置的元素，您可以将突出显示应用于这些元素（使用jQuery 1.3.2）。

  $.get('getlatest.php',
        { id: latestmessage }, 
        function(response) {
            $(response).prependTo('#forum_entries').effect('highlight',{},1500);
            latestmessage = $.cookie('last_post_id');
        }, 'html' );

Answer 2

只要给你的Div一个活跃的班级：

<?php

foreach ($print as $value)
{
    $readyText .= '<div id = "' . $value->post_id . '" class="active"';
    $readyText .= $value->first_name.' '.$value->last_name.' posted the following:'.
    $value->post_text.' The post was made about '.$time.' ago. 
    $readyText .= '</div>'; 
}

?>



setInterval("update()", 3000);
            function update()
                {
                $.get("getlatest.php", 
                        {
                    id: latestmessage
                }, 
                        function(response){
                    $("#forum_entries").prepend(response);
                    latestmessage = $.cookie('last_post_id');
            $("div.active").effect("highlight", {}, 1500);
            $("div.active").toggleClass("active");

                }, "html");

正如我在回答您之前的问题时已经建议的那样，与一个流行的图书馆/框架结合学习一些JavaScript是非常有意义的（我建议使用jQuery以上例子使用）。

Answer 3

在循环中，您可以为较新的帖子div添加假类属性... 然后在你的ajax调用之后加入#forum_entries 您可以应用突出显示，通过Jquery中的removeAttr（classname）删除class属性。所以在下次执行时你没有问题。

在jquery中选择通过AJAX检索的div

3 个答案: