使用 jQuery 在表格网格中选择相邻的 td答案

【问题标题】：Selecting an adjacent td in a table grid with jQuery使用 jQuery 在表格网格中选择相邻的 td
【发布时间】：2013-02-22 21:36:30
【问题描述】：

我正在尝试使用 jQuery 制作简单的数字游戏。我使用 html 表格构建了一个 7x7 网格。我创建了一些 jQuery 函数来允许用户突出显示和取消突出显示表格中的单元格。我想让它使用户选择的第一个单元格必须位于最左侧的列中，然后选择的每个后续单元格必须与突出显示的单元格相邻，直到它们将单元格一直连接到右侧桌子。这些单元格中会有数字，并且会有一些我尚未确定的游戏功能。

通过一个简单的布尔值和一些 if 逻辑，我确定第一个单元格必须来自左列，但现在 我无法确保每个后续单元格都与突出显示的单元格相邻。我为表中的每个 td 分配了一个编号 id，从 1 到 49（7 行，每行 7）。当用户选择一个单元格时，我会在一个名为 cellCoord 的数组中捕获该单元格的 id。我希望这样的事情可能会起作用：

var thisCell = parseInt($(this).attr('id'));
if  (thisCell == (cellCoord[i]+1) || thisCell == (cellCoord[i]-1) ||
     thisCell == (cellCoord[i]+7) || thisCell == (cellCoord[i]-7))

不幸的是，它没有。有什么建议吗？

可以在here 找到我的工作的早期草稿。

【问题讨论】：

ids 在 5 之前的所有 html 版本中可能不会以数字开头。您可以考虑使用 data- 属性。虽然我知道这并不能回答这个问题。想我应该指出来。
好吧，我给它们编号了（等），然后解析然后使用 parseInt($(this).attr('id')) .这不符合我的想法吗？
与手头的问题有关。 i 是先前选择的单元格的编号吗？而且，如果这些已经是整数，那么数组有什么用？除了边缘情况外，这似乎应该可以工作，这段代码的结果是什么？
它有效，它只是无效的 html。不过，浏览器往往会尽可能宽松，因此它实际上可能不会在现代浏览器中造成问题。
i 来自for(i = 0; i < cellCoord.length; i++)，它位于我帖子中的代码之前。照原样，代码有些工作，但在某些情况下，我似乎无法选择我认为应该的单元格，取消选择也是如此。

标签： jquery html-table

【解决方案1】：

从你的网站上取表，我会稍微改变一下添加类

<table>
    <tr class="row">
        <td class="square candidate"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
    </tr>
    ...
</table>

CSS：

.square {
    width: 30px;
    height: 30px;
    border: white solid 1px;
    background-color: lightblue;
}

.highlighted {
    background-color: lime;
}

然后选择相邻的方块

$('.square').click(function () {
    if ($(this).hasClass('candidate')) {
        $(this).addClass('highlighted');
        // select adjacent squares
        // horizontal
        $(this).prev('.square').addClass('candidate');
        $(this).next('.square').addClass('candidate');
        // vertical
        var i = $(this).index();
        $(this).parent('.row').prev('.row').children(':eq(' + i + ')').addClass('candidate');
        $(this).parent('.row').next('.row').children(':eq(' + i + ')').addClass('candidate');
    }
});

一个正方形是一个.candidate，如果它与一个已经是.highlighted的正方形相邻。

【讨论】：

这看起来很有希望。感谢您的建议。
这绝对是朝着正确的方向前进。我需要完成的是跟踪突出显示的单元格（而不是每次单击都重置它们）并创建 if-logic 以限制用户只能突出显示与已点亮的单元格相邻的单元格。
@Andy 只需删除重置并添加一些类highlighted 并检查。
@Andy 请查看更新的答案，如果您愿意，也可以为候选人添加一些 CSS。

【解决方案2】：

jQuery 的.index() 功能可以为您解决这个问题。它可以告诉您在一组项目中选择了哪个项目。

http://api.jquery.com/index/

【讨论】：

【解决方案3】：

为每个单元格分配一个 x 和 y 坐标。此外，添加一个类“选定”做任何突出显示的 div。例如。

<div data-x="1" data-y="1"><div data-x="2" data-y="1">
<div data-x="1" data-y="2"><div data-x="2" data-y="2">

然后像下面这样。

var div = $('#idOfDivJustClicked');
var x = div.data('x');
var y = div.data('y');

然后使用 jquery 的 attr 选择器搜索包含正负一的 x 或 y 坐标的 div。这不是确切的逻辑，您需要实现类似的东西。

if ($('div[data-x=' + (x+1) + '][data-y=' + y + ']').hasClass('selected'))
{
    // found an adjacent highlighted cell
    // execute code
}

【讨论】：