Question

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

使用一个简单的布尔值和一些if逻辑我确定第一个单元格必须来自左列，但是现在我无法确保每个后续单元格是一个与a相邻的单元格突出显示的单元格。我给表中的每个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。

Answer 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正方形相邻。

Answer 2

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

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

Answer 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选择器搜索div，其中包含x或y坐标，这些坐标是正或负1。这不是确切的逻辑，你需要实现类似的东西。

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

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

3 个答案: