我正在为我的游戏服务器制作一个网站,我正在尝试使用Steam API显示用户信息。
$.getJSON('/steamapi', function(data) {
document.getElementById("staff-inner").innerHTML = `${data.response.players.map(function(player) {
return `
<div class="player player-${player.steamid}">
<div class="name">${player.personaname}</div>
<div class="avatar"><img src="${player.avatarfull}"></div>
<div class="role"></div>
</div>
`;
}).join('')}`;
});
上面的代码工作正常。但是,我正在尝试做什么(我认为这是最好的方法)是创建一个if语句,说明$ {player.steamid}是我的Steam ID,它在.role中打印'Owner',并打印''主持人'如果是其他的话。看起来它很简单,但我尝试的一切都留给我一个空白页面。我不知道在这种情况下我会如何或在哪里写它。
在模板字符串中,只允许表达式,而不是语句。 if
是一份声明;但是有条件运算符(?:
)具有几乎相同的语义。
`...
<div class="role">${player.steamid == 'Rex4748' ? 'Owner' : 'Moderator'}</div>
...`
您可以在return语句之前声明变量并调用引用
let role = player.steamid == '111' ? 'Owner' : 'Moderator'
然后
<div class="role">${role}</div>
我没有足够的时间用steamAPI测试这个,但我认为它会起作用:
const appDiv = document.getElementById('app');
const my_steam_id = 'Rex4748';
const players = [{
steamid: 'Rex4748',
avatarfull: 'https://fakeimg.pl/50/',
personaname: 'Joe Perez'
},{
steamid: 'notYou',
avatarfull: 'https://fakeimg.pl/50/',
personaname: 'NewGuy'
}]
function getPlayers(){
let info_collected = [];
players.map((player)=> {
console.log(player.steamid);
info_collected.push(`
<div class="player player-${player.steamid}">
<div class="name">
${player.personaname}
</div>
<div class="avatar">
<img src="${player.avatarfull}">
</div>
<div class="role">
${player.steamid == my_steam_id ?
'Owner' :
'Moderator'}
</div>
</div>
<hr>
`);
})
return info_collected.join('');
}
appDiv.innerHTML = getPlayers();
笔:https://stackblitz.com/edit/using-json-objects-in-if-statements