多维数组未更新（或者是......？）

Question

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

完整来源： http://sinsysonline.com/tictactoe_test.html 或小提琴： 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，然后尝试在不刷新页面的情况下使用grid size 的4 制作游戏，数据似乎显示在我的array 的右上角代码按预期工作。

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

我收到以下控制台错误：

TypeError: b[row] is undefined

为什么b 实际上并没有随着增加的值而更新，即使我在click-handler 的开头为#go 将其定义为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 或小提琴： 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 移到外面，现在可以正常工作了。