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

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();

edit：我甚至尝试将上面的numHands函数制作成两个独立的函数，但似乎仍然没有将nHands=设置为任何值

Answer 1

尝试将numHands函数逻辑分离为两个函数。第一个将事件处理程序附加到您的按钮上，另一个将按照下面的代码进行计算。并将代码放在$(document).ready()；中；。根据jsFiddle的例子，您将nHands参数传递给函数，以便移除全局nHands diclaration。这是jsFiddle，它有效。另一件事是，如果你读取了全局变量nHands，你的其他函数，如recordBetAmount等，应该相应地更改。因为他们无法识别声明的nHands变量。并在控制台输出CCD_ 10。应修改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/