Глобальная переменная Javascript внутри функции класса - PullRequest
Новая
       42

Глобальная переменная Javascript внутри функции класса

0 голосов
/ 25 февраля 2019

Я не очень привык к 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", который, я думаю, не должен быть глобальной переменной, но как-то

edit: также когда я делаю это

updateScoreboard ({"name": "foo", "bgColor": {"r": 47.0, "b": 79.0, "a": 255.0, "g": 79.0}}) updateScoreboard ({"name": "bar", "bgColor": {"r": 47.0, "b": 79.0, "a": 255.0, "g": 79.0}})

в моем массиве панелей, все объекты объектаМетод 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>

1 Ответ

0 голосов
/ 25 февраля 2019

Вы должны вызывать вашу PlayerPanel с «новым», когда вы используете «это» в нем.

 function updateScoreboard(plyInfo){
        if (!isPlayerInScoreboard(plyInfo.name)) {
            new PlayerPanel(plyInfo)
        }
    }
...