2

不确定标题是否合适，请随意编辑:-)

我有一系列 html/css 创建如下所述的布局。

每个单元格都是一个在 html 中带有编号类的 div（cell_1、cell_2 等）。

当第一个网格中突出显示编号为 1 的页面称重传感器时。

用户可以使用键盘箭头键在单元格之间导航。当按下 ENTER 时，用户可以跳转到位置 1 的另一个网格。

仅允许使用某些逻辑（如下所述）根据当前单元格位置（单元格突出显示）导航到某些单元格。

每个网格的逻辑如下所述..其中

n= do nothing
bar= do nothing
y-2= means move to cell 2

我的问题是：而不是为每个网格使用一系列硬编码if或case语句，您能否建议我使用可重用逻辑的聪明方法（矩阵或类似的可能在 js 中）？

如果可能，请提供一个简短的示例或指向某些资源的链接。非常欢迎任何解决此方法的替代方法，谢谢。

  EXAMPLE LOGIC:
    grid type: 5x
    +--------+------+-------+
    +        +  2   +    4  +
    +   1    +------+-------+
    +        +  3   +    5  +
    +--------+------+-------+
    cell  up     down    left   right
      1   n      bar     n      y-2
      2   n      y-3     y-1    y-4
      3   y-2    bar     y-1    y-5
      4   n      y-5     y-2    n
      5   y-4    bar     y-3    n


    grid type: 7x
    +--------+------+-------+-------+
    +   1    +      3       +   6   +
    +------- +------+-------+-------+
    +   2    +  4   +   5   +   7   +
    +--------+------+-------+-------+
    cell  up     down    left   right
      1   n      y-2     n      y-3
      2   y-1    bar     n      y-4
      3   n      y-4     y-1    y-6
      4   y-3    bar     y-2    y-5
      5   y-3    bar     y-4    y-7
      6   n      y-7     y-3    n
      7   y-6    bar     y-5    n

    ///////////////////////
    grid type: 4x
    +--------+------+-------+-------+
    +        +      +       +       +
    +   1    +  2   +   3   +   4   +
    +        +      +       +       +
    +--------+------+-------+-------+
    cell  up     down    left   right
      1   n      bar     n      y-2
      2   n      bar     y-1    y-3
      3   n      bar     y-2    y-4
      4   n      bar     y-3    n
4

2 回答 2

3

这是不使用任何额外数据结构的解决方案，伪代码：

  1. top_x, top_y, width, height= 获取点击元素的边界

  2. 案例direction：

    left:

    new_x = top_x-w从左边界（其中 ( border_width+ paddigns) < w< the smallest box width)

    right: ...

    ...

  3. 使用document.elementFromPointusingnew_x和new_y找到正确div的点亮它。如果div没有改变，goto @2.

PS。最简单的方法就是使用正确的标签，比如 old-fashioned <table>。

PS2。当然，不要使用"goto"指令:)

于 2013-10-31T15:43:15.760 回答
2

您可以设计它的可重用性将受到限制。如果您希望每个网格都不同，您将不得不单独定义每个网格及其所有连接性。不过，鉴于此，抽象起来并不难。

  • 每个网格包含一系列单元格。
  • 每个单元格都有一些向上、向下、向左、向右的值。

所以把它放到一个包含其他对象的对象中，例如：

var gridType5 = {
    cells = {
        1: { up: "n", down: "bar", left: "n", right: "2" }, // easier without the "y-", but we can add it if you want
        2: { up: "n", down: "3", left: "1", right: "4" },
        3: { up: "2", down: "bar", left: "1", right: "5" },
        4: { up: "n", down: "5", left: "2", right: "n" },
        5: { up: "4", down: "bar", left: "3", right: "n" }
    }
};

var grids = {
    5: gridType5,
    4: gridType4,
    7: gridType7
};

然后，给定用户所在的任何单元格和网格，您只有一个移动逻辑：

function checkMove(currentGrid, currentCell, keypress) {
    var value = grids[currentGrid].cells[currentCell].keypress;
    if (value == "bar" || value == "n") {
        return value;
    }
    return grids[currentGrid].cells[value];
}

这是基本的想法。您可以修改逻辑，例如，如果您确实不需要“bar”或“n”值，则可以更改修改您的抽象：

  • 每个网格包含一系列单元格。
  • 每个单元格都有一组邻居。

这将使您的细胞看起来像：

        2: { neighbors: {down: 3, right: 4}},

你的 checkMove 看起来像：

function checkMove(currentGrid, currentCell, keypress) {
    var newCell = grids[currentGrid].cells[currentCell].neighbors[keypress];
    if (newCell) {
        return grids[currentGrid].cells[newCell];
    }
}
于 2013-10-31T15:41:00.127 回答