排行榜是通过一个关联SQL查询填充并存储在SQL变量中的。我已经成功地以JSON格式获得了输出,如此处所示。
//Shows user details and the current top 100 ranks
while ($row = mysql_fetch_assoc($result)) {
print json_encode ($row);
}
目前为止,使用[Tinysort][3]提供的动画排序示例效果良好。
function sort() {
var $Ul = $('ul#leaderboard');
$Ul.css({position:'relative',height:$Ul.height(),display:'block'});
var iLnH;
var $Li = $('ul#leaderboard>li');
$Li.each(function(i,el){
var iY = $(el).position().top;
$.data(el,'h',iY);
if (i===1) iLnH = iY;
});
$Li.tsort('h1:eq(0)',{order:'desc'}).each(function(i,el){
var $El = $(el);
var iFr = $.data(el,'h');
var iTo = i*iLnH;
$El.css({position:'absolute',top:iFr}).animate({top:iTo},500);
});
}
我相信我已经接近成功了,但是下面的poll()函数让我卡住了。
poll();
function poll() {
$.ajax({
url: 'http://test.bmx-tube.com/ajax.php', // needs to return a JSON array of items having the following properties: id, score, facebook_id, username
dataType: 'json',
success: function(o) {
for(i=0;i<o.length;i++) {
if ($('#row-'+o[i].player_id).length == 0) {
// this id doesn't exist, so add it to our list.
$("#leaderboard").append('<li><h1 style="display:inline" player_id="row-' + o[i].player_id + '">' + o[i].score + '</h1> <img style="height:50px" src="http://graph.facebook.com/' + o[i].facebook_id + '/picture"/> ' + o[i].name + '</li>');
} else {
// this id does exist, so update 'score' count in the h1 tag in the list item.
$('#row-'+o[i].player_id).html(o[i].score);
}
}
sort();
},
});
// play it again, sam
var t = setTimeout(poll,3000);
}
我已经尝试更改所有变量,但是到目前为止都没有成功。
非常感谢任何帮助。
data-player_id
,我指的是你在回调函数中将 player_id 存储为 DOM 元素上的自定义属性。但这真的取决于你打算如何使用这些数据以及是否担心你的标记的有效性。 - OACDesigns