javascript - 多维数组未更新(或者是......？)

Question

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

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

我为 JS 使用了一个多维数组，为 HTML 使用了一个table 用于数据和显示目的。

因此，对于 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>

所以，问题来了。输入工作正常，重置游戏出现工作正常，但让我们做一个用例，以便我可以演示问题。

如果我最初使用 3 的 grid size，然后尝试制作 grid size 为 4 没有刷新页面，数据似乎显示在我的 array 的右上角，代码正在按预期工作。

但是，当您console.log(b) 时，它实际上从未更新b 以及表中前三行 之后的任何内容不要回应。

我收到以下控制台错误:

TypeError: b[row] 未定义

为什么 b 实际上没有随着值的增加而更新，即使我在我的 click 开始时将其定义为 var b=[]; -handler for #go?

为什么我的 #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 的定义移到了外面，现在它可以正常工作了。