所以我认为我的for循环在某处出现了问题......
我将所有类都放在一个单独的css文件中,所以我在前端正确地看到了DOM上的所有内容。
我的问题是我需要让第1行和第3行应用这个类,我可以让它工作:
<i class="fa fa fa-trophy fa-4" aria-hidden="true">
理论上,我应该有一个包含10行的动态数据表,我们的应用程序中的用户是第一到第十行。
第1-3行:用户分别排在第一,第二和第三位......因此他们获得了“fa-trophy”课程。第4-10行:剩下的用户是否因此获得了“fa-user-circle-o”类。
我做错了什么?
Javascript:
for(var i = 0; i < data.leaderboards.length; i++){
row = $('<div class="leaderboard-row">');
row.append('<div class="user-circle"><i class="fa fa-user-circle-o fa-4" aria-hidden="true">' + '</i></div>');
row.append('<div class="leaderboard-col col1">' + (i + 1) + '</div>');
row.append('<div class="leaderboard-col col2"><span class="truncate">' + data.leaderboards[i].username + '</span></div>');
row.append('<div class="leaderboard-col col3"><span class="truncate">' + data.leaderboards[i].win_amount.formatMoney(0, '.', ',') + '</span></div>');
if(data.leaderboards[i].level_unlocked > _currLevel){
row.append('<div class="leaderboard-col col4">Won Playing ' + data.leaderboards[i].game_name + '</div>');
}
else{
row.append('<div class="leaderboard-col col4">Won Playing <a href="/game/' + data.leaderboards[i].game_slug + '">' + data.leaderboards[i].game_name + '</a></div>');
}
_table.append(row);
}
答案 0 :(得分:2)
为什么不在fa-trophy
时分配i <= 2
课程?像
if (i <= 2) {
// assign fa-trophy class for the first 3 places
row.append('<div class="user-circle"><i class="fa fa-trophy fa-4" aria-hidden="true">' + '</i></div>');
} else {
// do something else with 4th place onwards
row.append('<div class="user-circle"><i class="fa fa-user-circle-o fa-4" aria-hidden="true">' + '</i></div>');
}