Question

我有一个Div，其中最新消息是使用php从数据库获取的，而循环显示为 - ＆gt;

Hello News 1

Hello news 2

Hello news 3

新闻每10000毫秒更新

这是HTML部分 php While Loop从这里开始

<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>

循环在这里结束。这是我尝试过的 - ＆gt;

<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>

现在问题我面临的问题是它刷新了整个div，如果发现了新消息，那么新闻3应该逐渐消失＆amp;新消息排在最前面，如果发现另一条新闻，新闻2应该逐渐消失，例如＆gt;

ajax请求找到了一条新闻帖子，所以它会显示在这里

你好新闻2 //你好新闻1应该高于这个新闻2

Hello news 3

Hello news 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（）在顶部添加项目时，它会自动从底部删除项目。看看这个SO thread

Answer 2

创建一个容器来保存您的新闻：

<div class="news_container"></div>
为各个新闻项目创建模板：使用像Mustache.js
这样的东西是个好主意
<div class="news_item"> <h1 class="news_title"></h1> <p class="news_content"></p> </div>
让record_count.php以类似的方式将新闻项目发回给您：

$news = [ 'news_1_title' => 'Some news content here', 'news_2_title' => 'Some more content here', ];
拥有它们后循环遍历数组，克隆模板并使用类填写字段以查找要填充的部分（或使用您使用的模板包），然后{{1}它到你的.prepend()
使用.news-container查找容器中的最后一个新闻项并将其淡出（然后.last()将其完全删除）

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

2 个答案: