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，这样我就能证明问题。

如果我最初使用grid size 3，那么尝试使用grid size 4制作游戏而不刷新页面，数据似乎显示在我的array的右上角，代码按预期工作。

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

我遇到了以下控制台错误：

TypeError: b[row] is undefined

为什么b实际上没有使用增加的值进行更新，即使我在var b=[];的{{1}}开头将其定义为click-handler？

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

划痕头

感谢任何帮助...

HTML：

使用Javascript：

<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>

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

Answer 1

问题是因为close属性和on click函数的多个定义。 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的定义移到外面，现在效果很好。

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

1 个答案: