我不习惯es5，所以我遇到了一些麻烦，因为我被迫在我的情况下使用es5。问题是当我这样做的时候，updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})
在记分牌上创建一个新的面板，我的isPlayerInScoreboard函数返回false，因为playerName2在某种程度上是一个全局变量并且没有绑定到PlayerPanel函数，你可以通过调用updateScoreboard({"name":"foo","bgColor":{"r":47.0,"b":79.0,"a":255.0,"g":79.0}})然后退出“playerName2”看看我的意思，我不知道我认为应该是一个全球变量，但不知何故
编辑：当我这样做的时候
updateScoreboard（{“name”：“foo”，“bgColor”：{“r”：47.0，“b”：79.0，“a”：255.0，“g”：79.0}}）updateScoreboard（{“name”：“栏”， “BGCOLOR”：{ “R”：47.0， “b”：79.0， “一”：255.0， “G”：79.0}}）
在我的panel数组中，所有对象的getPlayerName方法返回最后输入的名称，所以在这种情况下，如果我做了panel [0] .getPlayerName（）它返回“bar”，应返回“foo”
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: rgba(25, 25, 25, 0.50);
font-family: "Arial";
}
.tab {
margin: 1px auto;
width: 95%;
height: 30px;
background-color: white;
}
#title-header {
/*display:inline-block;*/
/*color: white;*/
font-size: 25px;
color: white;
/*border-top: 1px solid white;*/
/*border-bottom: 1px solid white;*/
margin:0 auto;
/*vertical-align: middle;*/
text-align:center;
/*white-space: nowrap;*/
}
.player-img {
display: inline-block;
/*width: 50px;*/
}
.player-name {
display: inline-block;
position: relative;
bottom: 10px;
color: white;
}
</style>
</head>
<body>
<div id="title-header">
<h1>SleekRP</h1>
</div>
<div class="main-scoreboard">
<div class="tab">
<div class="player-img">
<img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/fe/fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb.jpg">
</div>
<p class="player-name">test</p>
</div>
<!-- <div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div> -->
</div>
<script>
var panels = [];
function setTitle(title){
document.getElementById("title-header").innerText = title
}
function isPlayerInScoreboard(name){
for (var i=0; i<panels.length; i++){
if (panels[i].getPlayerName() == name) {
return true
}
}
return false
}
function updateScoreboard(plyInfo){
if (!isPlayerInScoreboard(plyInfo.name)) {
PlayerPanel(plyInfo)
}
}
function PlayerPanel(plyInfo){
// Create element
var mainPanel = document.createElement('div')
mainPanel.className = "tab"
mainPanel.style.backgroundColor = "rgba(" + plyInfo.bgColor.r + ", " + plyInfo.bgColor.g + ", " + plyInfo.bgColor.b + ", 0.50)"
document.getElementsByClassName("main-scoreboard")[0].appendChild(mainPanel)
this.playerName2 = document.createElement('p')
this.playerName2.innerText = plyInfo.name
this.playerName2.className = "player-name"
mainPanel.appendChild(this.playerName2)
this.setPlayerName = function(name) {
this.playerName2.innerText = name
}
this.updatebGColor = function(bgColor){
mainPanel.style.backgroundColor = "rgba(" + bgColor.r + ", " + bgColor.g + ", " + bgColor.b + ", 0.50)"
}
this.getPlayerName = function() {
return this.playerName2.innerText
}
panels.push(this)
}
</script>
</body>
</html>
当你在其中使用“this”时，你应该使用“new”调用你的PlayerPanel。
function updateScoreboard(plyInfo){
if (!isPlayerInScoreboard(plyInfo.name)) {
new PlayerPanel(plyInfo)
}
}