Javascript 函数更改所选 div 周围的边框

Question

所以我有一个 Javascript 函数，它是我正在创建的网络游戏的一部分。它应该充当游戏中对象的速度选择器。选择显示“慢”的 div 应该会将对象的速度更改为慢，等等。加载页面时，选择“med”div。现在，我只想弄清楚为什么我尝试在当前选择的速度 div 周围设置边界不起作用。希望下面的代码是不言自明的。 (这里是游戏链接，如果有帮助的话:http://jaminweb.com/snake_TEST_PHP.php)

我在我的 Javascript 控制台中没有收到任何错误，并且我已经测试(使用 alert(...))以确保 3 个中的每一个都调用了 onlick 函数当我点击它们时出现 div。

非常感谢任何帮助。

相关代码:

    function speedController(slowButtonID, medButtonID, fastButtonID, sg)
    {
    /*
         slowButtonID, medButtonID, fastButtonID: IDs of the buttons for slow, medium and fast, respectively

         sg: Snake game object
    */

        this.spdMap = {"slow" : [slowButtonID, 200], "med" : [medButtonID, 100], "fast" : [fastButtonID , 50]};

        this.curSpd = "med";

        this.changeSpeed = function(newSpd)
        {
        /*
            newSpd: one of "slow", "med" or "fast"
        */
            /* Do nothing if selecting same speed as current */
            if (newSpd == this.curSpd)
                return;

            /* Else, remove border from currently selected speed button 
               and add border to newly selected speed button, then 
               change the speed of the snake's mover.
            */
            $("#"+this.spdMap[this.curSpd[0]]).css("border: 0px;");
            $("#"+this.spdMap[newSpd[0]]).css("border: 4px solid #3D4048;");
            sg.mover = setInterval(sg.move(), this.spdMap[newSpd[1]]);
        }
    }

---

        <div id="snakeSpdDiv">
            <p><b>Speed:</b></p>
            <div class="snakeSpdBtn" id="snakeSpdSlow">Slow</div>
            <div class="snakeSpdBtn" id="snakeSpdMed" style="border: 4px solid #3D4048;">Med</div>
            <div class="snakeSpdBtn" id="snakeSpdFast" onlick=>Fast</div>
            <script type="text/javascript">
                var sc = new speedController("snakeSpdSlow", "snakeSpdMed", "snakeSpdFast", s);
                $("#snakeSpdSlow").click(function()
                { 
                    sc.changeSpeed("slow");
                });
                $("#snakeSpdMed").click(function() 
                { 
                    sc.changeSpeed("med"); 
                });
                $("#snakeSpdFast").click(function()
                { 
                    sc.changeSpeed("fast"); 
                });
            </script>
        </div>

Answer 1

问题出在这部分:

$("#"+this.spdMap[this.curSpd[0]]).css("border: 0px;");
$("#"+this.spdMap[newSpd[0]]).css("border: 4px solid #3D4048;");

应该是:

$("#"+this.spdMap[this.curSpd][0]).css("border", "0px");
$("#"+this.spdMap[newSpd][0]).css("border", "4px solid #3D4048");

此外，之后您需要将 this.curSpd 更改为 newSpd。