如何获得所有类别的正方形答案

【问题标题】：How to get all classes of squares around如何获得所有类别的正方形
【发布时间】：2013-05-22 07:22:10
【问题描述】：

我有一张桌子，它看起来像这样：

| 1.1 | 1.2 | 1.3 | ___________________ | 2.1 | 2.2 | 2.3 | ___________________ | 3.1 | 3.2 | 3.3 |

例如，如果我点击 2.2，获得所有方块的最佳方法是什么？

【问题讨论】：

请发布您目前的代码，然后我们可以帮助您完成后续步骤。
是 HTML <table>？
jsfiddle.net/vkxbQ 这是我目前的代码。

标签： javascript minesweeper

【解决方案1】：

读取被点击单元格的cellIndex 属性及其父节点TR 的rowIndex。这为您提供了单元格的坐标：

coords = function(td) {
    return [td.cellIndex, td.parentNode.rowIndex];
}

创建相邻行和列的数组：

    var adj = [
        [x - 1, y - 1],
        [x - 0, y - 1],
        [x + 1, y - 1],

        [x + 1, y - 0],
        [x - 1, y - 0],

        [x - 1, y + 1],
        [x - 0, y + 1],
        [x + 1, y + 1]
    ];

遍历表格中的所有单元格并标记坐标在数组中的单元格：

    var tds = game.getElementsByTagName("TD");
    [].forEach.call(tds, function(td) {
        if(contains(adj, coords(td)))
            td.className = "hot";
        else
            td.className = "";
    });

完整的工作示例：http://jsfiddle.net/FByXq/

【讨论】：

【解决方案2】：

如果每个单元格的 id/name/someSelector 按行/列逻辑排序，例如a1, a2，则可以这样做。

创建一个获取下一个/上一列和下一个/上一行的函数。这未经测试，但这个概念应该有效。

function grabSurroundingBoxes(origElementId){
    var id = origElementId;
    var row = id[0];
    var col = parseInt(id[1]);

    var nextRow = String.fromCharCode(col.charCodeAt(0) + 1);
    var nextCol = col + 1;

    // grab the next element based on the concat of nextRow + nextCol.toString()

}

【讨论】：

【解决方案3】：

您可以在单击的所有单元格中分配一个类，只是拒绝单击的单元格。

$('td').on('click', function(){
    $(this).css('background', '#fff'); //reset
    $('td').not(this).css('background', '#ff9900'); //Adds background color in all cells except the cell clicked
});

http://jsfiddle.net/gusatvo_beavis/mT7zn/

【讨论】：

太棒了，但我只想检查左边的八个方块。

【解决方案4】：

为了我的答案的完整性而进行编辑， -

标记-

<table id="" border=1 cellspacing=0>
    <tr><td id="0-0">M</td><td id="0-1">M</td><td id="0-2">M</td></tr>
    <tr><td id="1-0">M</td><td id="1-1">M</td><td id="1-2">M</td></tr>
    <tr><td id="2-0">M</td><td id="2-1">M</td><td id="2-2">M</td></tr>

</table>

jQuery 脚本-

    $(function () {
        $("td").on("mouseover", function (event) {

        $("td").css("background","");
        var selectedBox = this.id;

        var selectedBoxRow = parseInt(selectedBox.split("-")[0]);
        var selectedBoxColumn = parseInt(selectedBox.split("-")[1]);

        var arrayOfNeighBours = [];

        for (var row = -1; row <= 1; row++) {
            for (var column = -1; column <= 1; column++) {
                var aNeighbour = ((selectedBoxRow + row) + "-" + (selectedBoxColumn + column));
                if (aNeighbour != selectedBox) {

                    $("#"+aNeighbour).css("background","blue");
                    arrayOfNeighBours.push(aNeighbour);
                }
            }
        }

    });
});

arrayOfNeighBours 将拥有所有的触摸框。

【讨论】：

jsfiddle.net/vkxbQ 这是我到目前为止的代码。我只想用这些东西来获取所有。

【解决方案5】：

这应该可以解决您的问题！

我在使用选择器获取正确索引时遇到问题，但我决定使用父 * 行大小计算当前索引

$('td').on('click', function(){
    $('td').css('background', ''); //reset
    var index = $(this).index() + ($(this).parent().index() * 3); //curent index
    for(var x = 0, y = index; y--; x++){
        $('td').eq(x).css('background', '#ff9900');
    }
});

http://jsfiddle.net/mT7zn/2/

【讨论】：

【解决方案6】：

您应该以某种方式“标记”表格中的坐标，以便每个单元格都知道其坐标。一种可能的解决方案包括（数据）属性。在您的代码中，您应该检查极端情况： 1）在第1行，上面没有行 2）在第3行，下面没有行 4) 1.1、2.1、3.1 左边没有元素 5) 来自 1.3、2.3 和 3.3 的 Rigth 不是元素。

一旦你有了这个基石，就很容易编写一个通用函数。

【讨论】：