Question

我正在尝试将基于console.log()/prompt的javascript游戏切换为适用于浏览器的可视可玩游戏。所以要做到这一点，我将jQuery与我的javascript混合在一起。

1）我正在尝试根据用户点击的按钮设置nHands = 1, 2, or 3。我有3个具有相同类.smallbutton的按钮，以及.oneh .twoh和.threeh的唯一类。

2）用户点击3个按钮中的任何一个按钮后，所有按钮都将消失，并使用$('.smallbutton').detach();。这很好。

问题在于上述1）。似乎没有将nHands =设置为任何内容。因为为了让recordBetAmount();运行/做某事，需要将它设置为等于1,2或3.为什么nHands没有设置为等于什么？

这是小提琴http://jsfiddle.net/cL9dx/。 请注意，小提琴包括我尝试的第二种方式。

这是我的代码的相关部分：

var hand1, hand2, hand3, hD, nHands; //global vars

function numHands() {
    $('<p>Choose the number of hands you want to play.</p>').appendTo('.message');
    $('.oneh').click(function () {
        nHands = 1;
        $('.smallbutton').detach();
    });
    $('.twoh').click(function () {
        nHands = 2;
        $('.smallbutton').detach();
    });
    $('.threeh').click(function () {
        nHands = 3;
        $('.smallbutton').detach();
    });
    if (nHands > 0 && nHands < 4) {
        x = 150000 / nHands;
        if (nHands > 0) {
            hand1 = new Hand("First Hand", x, x, ".hand1");
            if (nHands > 1) {
                hand2 = new Hand("Second Hand", x, x, ".hand2");
                if (nHands > 2) {
                    hand3 = new Hand("Third Hand", x, x, ".hand3");
                }
            }
        }
    } else {
        $('<p>ERROR!!!</p>').appendTo('.message');
    }
}

....
numHands();
recordBetAmount();

编辑：我甚至尝试将上面的numHands函数分成两个独立的函数，但似乎仍然没有将nHands =设置为任何东西。

Answer 1

尝试将numHands函数逻辑分成两个函数。首先将事件处理程序附加到您的按钮，其他将在此处进行如下代码计算。并将您的代码包含在$（document）.ready（）;中。根据你的jsFiddle示例，您将nHands参数传递给函数，因此删除全局nHands diclaration。 Here是有效的jsFiddle。另一件事是在这里，如果你读取全局变量nHands，你的其他函数如recordBetAmount等应该相应地改变。因为他们不承认声明了nHands变量。它在控制台输出中提供Uncaught ReferenceError: nHands is not defined。应修改recordBetAmount函数。文档就绪时，您正在调用它。但是，在我看来，这个功能应该在人们下注后调用。

$(document).ready(function()
{    
suits = ["s", "d", "c", "h"];
deck = [];
var hand1, hand2, hand3, hD; //global vars

   ...

function numHands() {
    var nHands;
    $('<p>Choose the number of hands you want to play.</p>').appendTo('.message');
        $('.oneh').click(function() {
            nHands = 1;
            $('.smallbutton').detach();
            numhands2(nHands); });
        $('.twoh').click(function() {
            nHands = 2;
            $('.smallbutton').detach();
            numhands2(nHands); });
        $('.threeh').click(function() {
            nHands = 3;
            $('.smallbutton').detach();
            numhands2(nHands); });

function numhands2(nHands) {
    console.log(nHands);
    if (nHands > 0 && nHands < 4) {
        x = 150000/nHands;
        if (nHands > 0) { hand1 = new Hand("First Hand", x, x, ".hand1");
            if (nHands > 1) { hand2 = new Hand("Second Hand", x, x, ".hand2");
                if (nHands > 2) { hand3 = new Hand("Third Hand", x, x, ".hand3"); } }
        hD = new Hand("Dealer", 4500200 , 4500200 , ".handD"); } }
    else { $('<p>ERRRORRRRR</p>').appendTo('.message'); } }
}

....

});

或者marge numHands2和recordBetAmount函数。

function numhands2(nHands) {
    console.log(nHands);
    if (nHands > 0 && nHands < 4) {
        x = 150000/nHands;
        if (nHands > 0) { hand1 = new Hand("First Hand", x, x, ".hand1");
            if (nHands > 1) { hand2 = new Hand("Second Hand", x, x, ".hand2");
                if (nHands > 2) { hand3 = new Hand("Third Hand", x, x, ".hand3"); } }
        hD = new Hand("Dealer", 4500200 , 4500200 , ".handD"); } }
    else { $('<p>ERRRORRRRR</p>').appendTo('.message'); } }
}

function recordBetAmount() {
    if (nHands > 0) { setBetAmount(hand1);
        if (nHands > 1) { setBetAmount(hand2);
            if (nHands > 2) { setBetAmount(hand3); } } } }

Answer 2

我尝试做你想做的事，只是做了一些改变：

$(document).ready(function () {
    var Hand = function Hand() {
        //your Hand class
    };

    var NumHands = function NumHands(callback) {
        var $this = this;
        this.callback = callback;
        this.hand1 = null;
        this.hand2 = null;
        this.hand3 = null;
        this.hD = null;
        this.nHands = null;

        $('<p>Choose the number of hands you want to play.</p>').appendTo('.message');
        $('.oneh').click(function () {
            $this.detachAndCreate(1);
        });
        $('.twoh').click(function () {
            $this.detachAndCreate(2);
        });
        $('.threeh').click(function () {
            $this.detachAndCreate(3);
        });
        this.detachAndCreate = function (val) {
            this.nHands = val;
            $('.smallbutton').detach();
            this.createHands();
            if (jQuery.isFunction(this.callback)) this.callback.call(this);
        };
        this.createHands = function () {
            if (this.nHands > 0 && this.nHands < 4) {
                var x = 150000 / this.nHands;
                if (this.nHands > 0) {
                    this.hand1 = new Hand("First Hand", x, x, ".hand1");
                    if (this.nHands > 1) {
                        this.hand2 = new Hand("Second Hand", x, x, ".hand2");
                        if (this.nHands > 2) {
                            this.hand3 = new Hand("Third Hand", x, x, ".hand3");
                        }
                    }
                }
            } else {
                $('<p>ERROR!!!</p>').appendTo('.message');
            }
        };
    };

    function recordBetAmount () {
        //here 'this' refers to numHands instance
    };

    var numHands = new NumHands(recordBetAmount);
});

Answer 3

<强>更新

更新您的jsfiddle并删除此问题不需要的代码并添加注释以解释更改

http://jsfiddle.net/raunakkathuria/cL9dx/4/

根据您的代码存在的问题是，您在文档加载时调用了numHands()和recordBetAmount()，但是当用户点击任意按钮时设置了nHands，这样您就可以此

var hand1, hand2, hand3, hD, nHands; //global vars

function recordBetAmount() {
  alert("Finally nHands is " + nHands);
}

$(document).ready(function () {
       $('.oneh').click(function() {
            nHands = 1;
            alert("First " + nHands);
            $('.smallbutton').detach(); 
            numHands();
        });
        $('.twoh').click(function() {
            nHands = 2;
            alert("Second " + nHands);
            $('.smallbutton').detach(); 
            numHands();
        });
        $('.threeh').click(function() {
            nHands = 3;
            alert("Third " + nHands);
            $('.smallbutton').detach(); 
            numHands();
        });
});

function numHands() {
    $('<p>Choose the number of hands you want to play.</p>').appendTo('.message');

    recordBetAmount();
    if (nHands > 0 && nHands < 4) {
        x = 150000/nHands;
        if (nHands > 0) { hand1 = new Hand("First Hand", x, x, ".hand1");
            if (nHands > 1) { hand2 = new Hand("Second Hand", x, x, ".hand2");
                if (nHands > 2) { hand3 = new Hand("Third Hand", x, x, ".hand3");
        } } } }
    else { 
        $('<p>ERROR!!!</p>').appendTo('.message'); 
    }


}

检查http://jsfiddle.net/raunakkathuria/NWQ8j/1/

根据单击的按钮在javascript中保存全局变量

3 个答案: