2

我遵循了以下教程： http ://technotip.com/2208/insert-data-into-mysql-jquery-ajax-php/ 和 http://technotip.com/2298/fetchextract-data-from-database -无刷新网页-jquery/

这些都很好用。

我的问题是，我该如何创建以下流程：

页面加载时，所有现有记录都正常出现在ul标签中。但是一旦页面加载完毕，任何新附加的li项目都会淡入。

function updates() {
 $.getJSON("pullsql.php", function(data) {
   $("ul").empty();
   $.each(data.result, function(){
    //$("ul").append("<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />");
    $('<div></div>').appendTo("ul").hide().append("<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />").fadeIn('slow');
   });
  });
 }

到目前为止，我已经尝试将 updates() 函数更改为上面的函数（原始行已注释掉，在其下方更改了行）。

这导致整个ul列表每 200 毫秒（更新计时器）淡入，但我需要每个li只淡入一次。

提前感谢您的任何帮助，并很高兴被重定向到适当的教程来帮助我学习，而不仅仅是提供代码。

***编辑* **

到目前为止，我认为以下功能导致答案出现问题：

    $(document).ready( function() {
 done();
});

function done() {
      setTimeout( function() { 
      updates(); 
      done();
      }, 200);
}
4

3 回答 3

1

我已经设法使用以下方法使其工作 - 感谢提供 .new 课程理念但后来删除了他的答案的人。这通过使用 MySQL 中的自动增量 id 来工作。对于 UPDATE 而不仅仅是 INSERT 的记录，我想我可以在更新时添加一个时间戳并将 var ulid = 添加到以前的记录时间戳

var ulid = 0;
function updates() {
  $.getJSON("pullsql.php", function(data) {
     $("ul").empty();
     $.each(data.result, function(){

     if (ulid >= this['id']){
        $("ul").append("<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />");
     } else {
        $("ul li").removeClass("new"); 
        $("ul").append('<li class="new">Name: '+this['name']+'</li><li class="new">Age: '+this['age']+'</li><br />');
        $("ul li.new").fadeIn('slow');
        ulid = this['id'];
    }
       });
 });
}
于 2013-02-01T09:10:58.097 回答
0

你不能在<div>里面<ul>

试试这个

function updates() {
  $.getJSON("pullsql.php", function(data) {
     $("ul").empty();
     $.each(data.result, function(){
          var newli=  "<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />"; 
          $(newli).appendTo("ul").hide().fadeIn('slow');

   });
 });
}
于 2013-01-31T10:33:41.963 回答
0

你应该试试这个：

var newLi = $("<li>Name: "+this['name']+"</li>
               <li>Age: "+this['age']+"</li><br />");

newLi.css('display','none').appendTo('ul');
$('ul li:last-child').fadeIn('slow');
于 2013-01-31T10:34:54.367 回答