Question

我有变量playerTurn，它只是没有改变价值观有人能告诉我为什么？我已经尝试使用警报来查找代码出错的地方我已经编写了代码的多种方式，为什么这个var不会更新？除了这个变量外，其他所有工作都应该正常工作。

    <div class="square p1">1</div>
    <div class="square p1">2</div>
    <div class="square p1">3</div>
    <div class="square p1">4</div>
    <div class="square p1">5</div>
    <div class="square">6</div>
    <div class="square" style="background-color: #ff0000;">7</div>
    <div class="square">8</div>
    <div class="square p2">9</div>
    <div class="square p2">10</div>
    <div class="square p2">11</div>
    <div class="square p2">12</div>
    <div class="square p2">13</div>
    <div class="square p1">14</div>
    <div class="square p1">15</div>
    <div class="square p1">16</div>
    <div class="square p1">17</div>
    <div class="square p1" style="background-color: #8b4513;">18</div>
    <div class="square">19</div>
    <div class="square" style="background-color: #ff0000;">20</div>
    <div class="square">21</div>
    <div class="square p2">22</div>
    <div class="square p2" style="background-color: #8b4513;">23</div>
    <div class="square p2">24</div>
    <div class="square p2">25</div>
    <div class="square p2">26</div>
    <div class="square p1" style="background-color: #008000;">27</div>
    <div class="square p1" style="background-color: #008000;">28</div>
    <div class="square p1">29</div>
    <div class="square p1">30</div>
    <div class="square p1" style="background-color: #8b4513;">31</div>
    <div class="square">32</div>
    <div class="square" style="background-color: #ff0000;">33</div>
    <div class="square">34</div>
    <div class="square p2">35</div>
    <div class="square p2" style="background-color: #8b4513;">36</div>
    <div class="square p2">37</div>
    <div class="square p2" style="background-color: #008000;">38</div>
    <div class="square p2" style="background-color: #008000;">39</div>
    <div class="square p1" style="background-color: #008000;">40</div>
    <div class="square p1" style="background-color: #008000;">41</div>
    <div class="square p1">42</div>
    <div class="square p1">43</div>
    <div class="square p1">44</div>
    <div class="square">45</div>
    <div class="square" style="background-color: #8b4513;">46</div>
    <div class="square">47</div>
    <div class="square p2">48</div>
    <div class="square p2">49</div>
    <div class="square p2">50</div>
    <div class="square p2" style="background-color: #008000;">51</div>
    <div class="square p2" style="background-color: #008000;">52</div>
    <div class="square p1" style="background-color: #008000;">53</div>
    <div class="square p1" style="background-color: #008000;">54</div>
    <div class="square p1">55</div>
    <div class="square p1" style="background-color: #8b4513;">56</div>
    <div class="square p1">57</div>
    <div class="square">58</div>
    <div class="square" style="background-color: #ff0000;">59</div>
    <div class="square">60</div>
    <div class="square p2" style="background-color: #8b4513;">61</div>
    <div class="square p2">62</div>
    <div class="square p2">63</div>
    <div class="square p2" style="background-color: #008000;">64</div>
    <div class="square p2" style="background-color: #008000;">65</div>
    <div class="square p1">66</div>
    <div class="square p1">67</div>
    <div class="square p1">68</div>
    <div class="square p1" style="background-color: #8b4513;">69</div>
    <div class="square p1">70</div>
    <div class="square">71</div>
    <div class="square" style="background-color: #ff0000;">72</div>
    <div class="square">73</div>
    <div class="square p2" style="background-color: #8b4513;">74</div>
    <div class="square p2">75</div>
    <div class="square p2">76</div>
    <div class="square p2">77</div>
    <div class="square p2">78</div>
    <div class="square p1">79</div>
    <div class="square p1">80</div>
    <div class="square p1">81</div>
    <div class="square p1">82</div>
    <div class="square p1">83</div>
    <div class="square">84</div>
    <div class="square" style="background-color: #ff0000;">85</div>
    <div class="square">86</div>
    <div class="square p2">87</div>
    <div class="square p2">88</div>
    <div class="square p2">89</div>
    <div class="square p2">90</div>
    <div class="square p2">91</div>

    <script type="text/javascript">
        var p1Setup = 9;
        var p2Setup = 9;
        var playersTurn = "p1";
        function update() {
            if(playersTurn == "p1") {
                p1PlaceUnits();
            }
            if(playersTurn == "p2") {
                p2PlaceUnits();
            }
        }
        function p1PlaceUnits() {
            $(".p1").click(function() {
                if(p1Setup > 0) {
                    if(!$(this).hasClass('unitPlaced-p1')) {
                        $(this).addClass("unitPlaced-p1");
                        p1Setup--;
                        //alert("Player 2's turn.");
                        playersTurn = "p2";
                        update();
                    }
                }
            });
        }
        function p2PlaceUnits() {
            $(".p2").click(function() {
                if(p2Setup > 0) {
                    if(!$(this).hasClass('unitPlaced-p2')) {
                        $(this).addClass("unitPlaced-p2");
                        p2Setup--;
                        //alert("Player 1's turn.");
                        playersTurn = "p1";
                        update();
                    }
                }
            });
        }
    </script>

如果您要检查代码War Pit

，请访问以下网站链接

Answer 1

代码仅评估一次，因此当您测试变量playersTurn时，它始终为真。当您点击.p1或.p2时，不会再次评估测试变量playersTurn的代码

Answer 2

我修改了你的JS是超级高效的！超过9000 !!!!!!

var setup = {
    p1: 9,
    p2: 9
}
var playersTurn = "p1";

$('.square').click(function () {
    if (setup[playersTurn] > 0 && !$(this).hasClass('unitPlaced-' + playersTurn) && $(this).hasClass(playersTurn)) {
        $(this).addClass('unitPlaced-' + playersTurn);
        setup[playersTurn]--;
        (playersTurn == "p1") ? playersTurn = "p2" : playersTurn = "p1";
    }
});

在这里你可以在jsfiddle中看到它：http://jsfiddle.net/SXjSe/4/

在这段代码中，变量实际上没有变化，为什么？

2 个答案: