使用jQuery在表格网格中选择相邻的td [英] Selecting an adjacent td in a table grid with jQuery

问题描述

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

I'm trying to make a simple numbers games using jQuery. I built a 7x7 grid using an html table. I created some jQuery functions to allow the user to highlight and un-highlight cells in the table. I would like to make it so that the first cell the user selects must be in the far left column, and then each subsequent cell selected must be adjacent to one that is highlighted, until they connect cells all the way to the right side of the table. The cells will have numbers in them and there will be some gamey functionality that I haven't set in stone yet.

使用简单的布尔值和一些if-logic，我确定第一个单元格必须来自左列，但是现在我很难确保每个后续单元格都与突出显示的单元格相邻.我给表中的每个td一个编号为ID的编号，从1-49(7行，共7行).当用户选择一个单元格时，我会在名为cellCoord的数组中捕获该单元格的ID.我希望这样的事情可能会起作用:

With a simple boolean and some if-logic I established that the first cell must be from the left column, but now I'm having trouble making sure that each subsequent cell be one that is adjacent to a highlighted cell. I have given each td in the table a numbered id, from 1-49 (7 rows of 7). When a user selects a cell I capture that cell's id in an array called cellCoord. I was hoping that something like this might work:

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

不幸的是，事实并非如此.有什么建议吗?

Unfortunately it doesn't. Any suggestions?

此处.

推荐答案

从您的网站中提取表格，我会对其进行一些更改，添加类

Picking up the table from your website, I would change it a bit adding classes

<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');
    }
});

如果正方形与已经存在的.highlighted正方形相邻，则正方形是.candidate.

A square is a .candidate, if it is adjacent to an already .highlighted square.

这篇关于使用jQuery在表格网格中选择相邻的td的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！