动态地将新数据加载到div并隐藏旧数据。

Question

我有一个Div，其中使用php而循环从数据库中获取最新新闻，如->

你好，新闻1 你好新闻2 你好新闻3

新闻每10000毫秒更新一次。

这里是HTML php，而循环从这里开始

<div class="media">
<div class="media-object pull-left has-notif">
<i class="fa fa-flash"></i>
</div>
 <div class="media-body">
 <span class="media-heading"><?php echo $fot['message']; ?></span>
 <span class="media-meta time"><?php echo timeAgo($fot['time']); ?></span>
  </div>
  </div>

循环就在这里结束。以下是我尝试过的->

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#news').load('record_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds

<div id="news"> </div>

现在我面临的问题是，它刷新了整个部门，如果发现新的新闻比新闻数字3要少&新的新闻出现在顶部，如果发现另一个新闻，则新闻2应该消失，例如->

ajax请求找到了一个新闻帖子，所以它会出现在这里。

Hello 2 // Hello 1应出现在此新闻2之上 你好新闻3 你好新闻4//新闻4应该从屏幕上淡出

Answer 1

你可以用这样的东西

<div>
<ul>
    <li>zero</li>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>
</div>

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#news').prepend('record_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
var maxAllowed = 3;
$( 'li:gt(' + ( maxAllowed-1 ) + ')' ).remove();}
</script>

当在顶部添加项时，它将使用prepend()自动从底部删除项。看看这个，所以线程

Answer 2

1. 创建一个容器，将您的新闻保存在： <div class="news_container"></div>
2. 为单个新闻项目创建一个模板:使用类似于Mustache.js的内容是个好主意 <div class="news_item"> <h1 class="news_title"></h1> <p class="news_content"></p> </div>
3. 让record_count.php将如下数组中的新闻项目发回： $news = [ 'news_1_title' => 'Some news content here', 'news_2_title' => 'Some more content here', ];
4. 循环遍历数组，克隆模板并使用类填充字段以查找要填充的部分(或使用模板包)，然后将其.prepend()到.news-container
5. 使用.last()查找容器中的最后一个新闻项目并将其淡出(然后.remove()将其完全删除)