多维数组未更新(或者它是..?)

Question

我有一个最特殊的问题，如果不编写创可贴代码，我似乎无法解决。

完整来源：http://sinsysonline.com/tictactoe_test.html或Fiddle:http://jsfiddle.net/JsXEP/

我将multidimensional array用于JS，将table用于HTML以用于数据和显示目的。

因此，对于JS:，我们的数据将是这样的

var b = [ ["","",""], ["","",""], ["","",""] ];

该表将是一个标准表，并对我们的HTML:进行了一些CSS调整

<table id="board">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

所以，问题来了。输入工作正常，重置游戏显示工作正常，但让我们制作一个use-case，这样我就可以演示这个问题。

如果我最初使用3的grid size，然后尝试在不刷新页面的情况下使用4的grid size制作游戏，则数据似乎显示在我的array的右上角，表明代码正在按预期工作。

然而，当您console.log(b)时，它实际上从未更新b，并且表中第一个three rows之后的任何内容都不会响应。

我收到一个控制台错误：

TypeError: b[row] is undefined

为什么b实际上没有用增加的值更新，尽管我在#go的click-handler开始时将其定义为var b=[];？

为什么我的用于调试的#alert框填写了正确的b值？

刮擦头

任何帮助都将不胜感激。。。

---

HTML:

<div id="dashboard">
<p>How large is your grid? (3-10)</p>
<input type="text" id="size" size="1" />
<p>Which icon would you like?</p>
<select name="mydropdown" id="mark">
<option value="check">Check-Mark</option>
<option value="x">Traditonal X</option>
<option value="o">Traditional O</option>
</select>
<h3 id="title">Troubleshooting Console</h3>
<input type="button" id="go" value="Create Board / Reset" />
<p id="alert">Alerts Live Here</p> 
</div>
<table id="board">
</table>

Javascript：

$("#go").click(function () {
var b=[],
s = parseInt($("#size").val()),
v = $("#mark").val();
if (s<3 || s>10) { alert("That is not a valid input. Please select 3-10"); return; }
$('#board tr').remove();
$('#alert').text("Your Turn!");
for (var i = 0; i < s; i++) {
var t = [];
var $tr = $('<tr />').data('index', i + 1);
for (var j = 0; j < s; j++) {
t[j] = "";
$('<td />').data('index', j + 1).appendTo($tr);
}
b.push(t);
$("#board").append($tr);
}
$("#board").on('click', 'td', function () {
var $td = $(this),
td = $td.data('index')-1,
row = $td.parent().data('index')-1;
b[row][td] = "X";
$td.removeClass().addClass(v);
$('#alert').text(b);
});
});

完整来源：http://sinsysonline.com/tictactoe_test.html或Fiddle:http://jsfiddle.net/JsXEP/

Answer 1

问题是因为闭包属性和点击函数的多个定义。Updated Fiddle

$("#board").on('click', 'td', function () {
var $td = $(this),
td = $td.data('index')-1,
row = $td.parent().data('index')-1;
b[row][td] = "X";
$td.removeClass().addClass(v);
$('#alert').text(b);
});

每当用户更改设置时都会注册此功能，每当定义此功能时，它都会捕获b。所以，第一次，比方说，b是[3][3]，点击函数就是用它创建的。下一次，b是[4][4]，并创建了一个新的点击功能(旧的功能仍然存在，b[3][3])。所以他们两个现在都被解雇了。如果我选择3 x 3以外的任何内容，旧的将失败。这就是你面临这个问题的原因。

所以，我只是把点击函数b和v的定义移到了外面，现在它工作得很好。