修复 JS 和 JQ 中的一些变量问题答案

【问题标题】：Fixing some variable issues in JS and JQ修复 JS 和 JQ 中的一些变量问题
【发布时间】：2014-04-30 03:24:09
【问题描述】：

我正在学习用 javascript 编程，以便可以向我的网站添加一些功能。我正在尝试在浏览器中制作一个简单的二十一点游戏，现在我不知道发生了什么。

我有 2 个函数：第一个函数 randomCard() 生成随机卡片，第二个函数 deal() 使用 for 循环两次使用第一个函数并将卡片存储到数组中。我宁愿不合并这些功能，因为将来还有其他地方将它们分开会更方便。我在两个对象上使用 deal 函数，用户和经销商的方法手。

现在问题来了，当我将这些值记录到控制台时（不是最终值，仅用于测试），它们每次都是相同的，我不知道为什么。但是当我只记录deal() 函数时，它们都是不同的（见脚本底部）。

我想不通，非常感谢帮助，这是我到目前为止的所有代码。

我正在使用 jQuery 1.11.0。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Blackjack Game</title>
    </head>
    <body>

        <button type="submit" id="deal">Deal</button>
        <p class="user">
            Your cards: 
        </p>
        <p class="dealer">
            The dealers cards: 
        </p>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>

        $(document).ready(function() {

            // gives the user and dealer a DOM element
            var $user_cards = $('.user');
            var $dealer_cards = $('.dealer');

            // hides the DOM elements until the game has started
            $($user_cards).hide();
            $($dealer_cards).hide();

            // jQuery var for DOM element to start the game
            var $deal = $('#deal');

            // var to track if the deal button  has been clicked
            var click = 0;

            function randomCard() {
                // random number between 0 and 10
                var j = Math.random() * 10;
                // round that number into a var called card
                var card = Math.round(j);   
                // if card is 0, assign a J Q or K by making a random number again
                if (card === 0) {
                    //another random number
                    var k = Math.random() * 10; 
                    // checks random number and assign J Q or K                     
                    if (k <= 4) {
                        card = 'J';
                    } else if (k <= 7) {
                        card = 'Q';
                    }
                    else {
                        card = 'K';
                    }
                }
                // value of the function is a single card
                return card;
            }

            // empty array to store cards
            var cards = [];

            function deal() {
                // var to start for loop 
                var i = 0;              
                // start for loop 
                for (i; i < 2; i++) {
                    // add a random card to the i^th index of cards
                    cards[i] = randomCard();
                }
                // value fo function is array of two cards
                return cards;
            }

            $($deal).click(function() {

                // make the game start check = 1
                click++;
                // check to see if the game started
                if (click === 1) {
                    // make the button disappear when game has started
                    $($deal).fadeToggle('fast');

                    // makes the player DOM elements appear when game is started
                    $($user_cards).fadeToggle(2000);
                    $($dealer_cards).fadeToggle(2000);
                }

                // make an object for the user and store hand under user.hand
                var user = {
                    hand: deal()
                };

                // make an object for the dealer and store hand under dealer.hand
                var dealer = {
                    hand: deal()
                };

                console.log(user.hand + " " + dealer.hand);
                console.log(deal());
                console.log(deal());
                console.log(deal());
                console.log(deal());
                console.log(deal());
                console.log(deal());


            }); // $deal.click() end

        }); // document.ready() end

        </script>
    </body>
</html>

【问题讨论】：

仅供参考，没有理由这样做$($user_cards).hide();。你可以做$user_cards.hide();。 .hide() 是一个 jQuery 对象的方法，$user_cards 已经是一个 jQuery 对象，所以你可以直接使用它。无需通过 $($user_cards) 创建另一个 jQuery 对象。

标签： javascript jquery logging web-applications

【解决方案1】：

好消息和坏消息：

好消息

您的代码确实有效。

如果你替换

console.log(deal());

与

console.log(JSON.stringify(deal()));

然后你会得到你期望的结果。

坏消息

Chrome 控制台是“实时的”——这意味着它显示对象的当前值——而不是您记录它时的值。

（如果你问我，我会称这是一个错误——但我的投票不算数。）

你有两个解决方案。

解决方案 1

像我一样使用console.log 和stringify。

解决方案 2

通过稍微移动重新排列您的代码，使 deal 返回一个新的不同对象。

function deal() {
  // MOVE THESE LINES INSIDE THE FUNCTION.
  // empty array to store cards
  var cards = [];

  // var to start for loop 
  var i = 0;              
  // start for loop 
  for (i; i < 2; i++) {
    // add a random card to the i^th index of cards
    cards[i] = randomCard();
  }
  // value fo function is array of two cards
  return cards;
}

【讨论】：

【解决方案2】：

也许这对你有帮助

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

定义 getter 和 setter

getter 是一种获取特定属性值的方法。 setter 是一种设置特定属性值的方法。您可以在任何支持添加新属性的预定义核心对象或用户定义对象上定义 getter 和 setter。定义 getter 和 setter 的语法使用对象字面量语法。

应用于您的代码：

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Blackjack Game</title>
</head>
<body>

    <button type="submit" id="deal">Deal</button>
    <p class="user">
        Your cards: 
    </p>
    <p class="dealer">
        The dealers cards: 
    </p>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

    $(document).ready(function() {

        // gives the user and dealer a DOM element
        var $user_cards = $('.user');
        var $dealer_cards = $('.dealer');

        // hides the DOM elements until the game has started
        $($user_cards).hide();
        $($dealer_cards).hide();

        // jQuery var for DOM element to start the game
        var $deal = $('#deal');

        // var to track if the deal button  has been clicked
        var click = 0;

        function randomCard() {
            // random number between 0 and 10
            var j = Math.random() * 10;
            // round that number into a var called card
            var card = Math.round(j);   
            // if card is 0, assign a J Q or K by making a random number again
            if (card === 0) {
                //another random number
                var k = Math.random() * 10; 
                // checks random number and assign J Q or K                     
                if (k <= 4) {
                    card = 'J';
                } else if (k <= 7) {
                    card = 'Q';
                }
                else {
                    card = 'K';
                }
            }
            // value of the function is a single card
            return card;
        }

        // empty array to store cards
        var cards = [];

        function deal() {
            // var to start for loop 
            var i = 0;              
            // start for loop 
            for (i; i < 2; i++) {
                // add a random card to the i^th index of cards
                cards[i] = randomCard();
            }
            // value fo function is array of two cards
            return cards;
        }

        $($deal).click(function() {

            // make the game start check = 1
            click++;
            // check to see if the game started
            if (click === 1) {
                // make the button disappear when game has started
                $($deal).fadeToggle('fast');

                // makes the player DOM elements appear when game is started
                $($user_cards).fadeToggle(2000);
                $($dealer_cards).fadeToggle(2000);
            }

            // make an object for the user and store hand under user.hand
            var user = {
                //hand: function() { return deal() }
                get hand() { return deal(); },
            };

            // make an object for the dealer and store hand under dealer.hand
            var dealer = {
                //hand: function() { return deal() }
                get hand() { return deal(); },
            };

            console.log(user.hand + " " + dealer.hand);
            console.log(deal());
            console.log(deal());
            console.log(deal());
            console.log(deal());
            console.log(deal());
            console.log(deal());


        }); // $deal.click() end

    }); // document.ready() end

    </script>
</body>

【讨论】：