需要帮助通过数组获取类名

Question

我正在开发一款井字游戏，我需要一些帮助。这是我的董事会的设置方式：

---

[a1] [a2] [a3]  
[b1] [b2] [b3]  
[c1] [c2] [c3]

---

这些值是我分配给这些特定空间的类。在 jQuery 中，我将这些类设置为一个数组值，如下所示：

var spacesArray = [
    "a1", "a2", "a3",
    "b1", "b2", "b3",
    "c1", "c2", "c3"
]

所以spacesArray[0]等于左上角空格，spacesArray[4]等于中间空格，以此类推。

我正在尝试创建一个函数来确定三个空格何时在一行或一列中对齐。为了做到这一点，我为最后点击的空间添加了一个变量，我将其命名为 lastClickedElement。

理想情况下，我希望这个函数做的事情是这样的。对于这个例子，假设我点击的最后一个空格是中间空格（b2）。

1. 比较 lastClickedElement (b2) 以查看其类是否与数组值匹配
2. 如果匹配，请检查板上和下方的元素，看看它们是否被同一玩家选中。在这种情况下，它可以是 a2 和 c2 或 b1 和 b3。
3. 如果三个空格垂直或水平排列，则游戏结束，玩家获胜。

我知道这不会说明对角线的胜利，但我可以单独处理。

我的问题是：如何同时访问类名和数组值？我正试图弄清楚如何措辞，所以如果这听起来像胡言乱语，我很抱歉。

我想做这样的事情（请原谅任何错误的语法）：

1. 我单击空间 b2，使其成为 lastClickedElement。
2. 我想检查它的类 (.b2) 和它在数组中的位置 (spacesArray[4])。
3. 确认.b2与spacesArray[4]相同后，我想检查它上面和下面的空格，所以我猜它会检查类似spacesArray[4+3]和spacesArray[4-3]的东西。
4. 然后它会检查它旁边的空格，spacesArray[4+1] 和 spacesArray[4-1]。
5. 单击空间后，它会根据轮到谁添加类“spaceTakenPlayer1”或“spaceTakenPlayer2”，因此它会检查其中一个类。

再说一次，我不知道该如何表达，如果造成混淆，我很抱歉。

这里有一个 jsFiddle 供那些想要更好看的人使用：

http://jsfiddle.net/hrd0h8jo/

对于这个jsFiddle，左边的img是X，右边的img是O。一旦游戏开始，玩家1的空间会变成番茄，玩家2的空间会变成青色。

感谢您的所有帮助。

Answer 1

假设您创建当前游戏状态的地图，其中每个单元格包含 0（未占用）、1（玩家 1）或 2（玩家 2）：

New Game:
[0] [0] [0]  
[0] [0] [0]  
[0] [0] [0]  

Player 1 wins diagonal:
[1] [2] [2]  
[0] [1] [0]  
[0] [0] [1]  

只有 8 种获胜组合。它们可以很容易地明确列出。这是一个 checkWin 函数，用于处理上面定义的游戏状态图：

function checkWin() {
    var v = 0,
        stateMap = getGameStateMap();


    // diagonal top-left to bottom-right
    v = stateMap[0];
    if (v > 0 && v === stateMap[4] && v === stateMap[8]) {
      $scope.winner = v;
      $scope.gameOver = true;
      return;
    }
    // diagonal top-right to bottom-left
    v = stateMap[2];
    if (v > 0 && v === stateMap[4] && v === stateMap[6]) {
      $scope.winner = v;
      $scope.gameOver = true;
      return;
    }

    for (var x = 0; x < 3; x++) {

      // Horizontal  
      v = stateMap[(x * 3) + 0];
      if (v > 0 && v === stateMap[(x * 3) + 1] && v === stateMap[(x * 3) + 2]) {
        $scope.winner = v;
        $scope.gameOver = true;
        return;
      }

      // Vertical  
      v = stateMap[x];
      if (v > 0 && v === stateMap[x + (1 * 3)] && v === stateMap[x + (2 * 3)]) {
        $scope.winner = v;
        $scope.gameOver = true;
        return;
      }

    }

  }

这里有一个 plunk 来演示：http://plnkr.co/edit/NWubDTTVkpAhgrCCM2Ha?p=preview

它使用 angular，所以它可能对你没有太大帮助；我不想处理事件绑定。

Answer 2

您的帖子中有很多内容，但似乎主要问题是，当单击具有类名（如 b2）的 html 元素时，您需要某种方式将其与您的 spacesArray 相关联。

所以我会使用html data attributes 将数组索引作为html 元素的一部分包含在内。所以你的 html 会是这样的：

<div class="b2 gamespace gamespace-bg unselected" data-index="4"></div>

然后在您的点击处理程序中，您可以有类似的东西：

var index = $(this).attr('data-index');   // this would equal 4

这是你要问的吗？