Question

我试图制作tic tac toe游戏，仅仅基于html，css，pure js。我已经有了游戏的基础（有一个bug），但是一旦有人获胜，我就有问题需要检测。我已决定使用MagicSquare算法，但我不知道如何为每个td元素附加值。 Here你可以找到，我现在拥有的东西。我试图制作像player += Number(target.value);这样的东西，一旦其中一个玩家收集了15，然后我停止游戏并显示消息。 Ofc，现在还没有用，所以你能告诉我一些好主意如何用td元素分配值，然后在玩家生成点击事件后通过js读取它吗？

的index.html

<table class="gameArea" onclick="myFunction(event)">
     <tbody>
         <tr>
             <td value=4></td>
             <td value="9"></td>
             <td value="2"></td>
         </tr>
         <tr>
             <td value="3"></td>
             <td value="5"></td>
             <td value="7"></td>
         </tr>
         <tr>
             <td value="8"></td>
             <td value="1"></td>
             <td value="6"></td>
         </tr>
     </tbody>
</table>

的script.js

  var player1 = 0,
      player2 = 0,
      round = 0;

function myFunction(event) {
    var target = event.target;
    //target.className += "x";

    if(hasClass(target, "x") || hasClass(target, "y") ){
      alert("Taken");
      return;
    }

    if(round === 1){
      target.className += "x";
      player1 += Number(target.value);
      round = 0;
      console.log(target.value);
    } else {
      target.className += "y";
      round = 1;
      player2 += Number(target.value);
      console.log("Player 2: " + player2);
    }

    console.log(round);
  }

  function hasClass( elem, klass ) {
   return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}

Answer 1

更改HTML以使用数据属性，如下所示：

<td data-value="3"></td>

然后您可以读取该值，如下所示：

player1 += parseInt(target.dataset.value, 10);

有关MDN here的更多信息。

Answer 2

在特定的案例中，您已经拥有该元素附带的信息：您有一个类x或y，它会告诉您标记该广场的人员。你可以简单地使用它。

在一般情况下，有三种常见的方法：

单独的数据缓存，由元素的id或与该元素关联的其他唯一标识符键控。这里的想法是为元素提供唯一ID，并将这些ID用作存储元素数据的对象的键。

这与元素很好地分开（浏览器拥有DOM，毕竟不是我们的代码），但是有一个问题，即即使删除了元素，对象中的条目仍然存在。

ES2015通过添加WeakMap来解决该问题，as Keir points out是一个可以使用任何值（包括DOM对象引用）作为键的映射，并且只保存键弱（不不要阻止它们从内存中删除。如果删除了某个键，则该条目将从地图中删除。因此，在支持本机WeakMap的浏览器中（无法正确填充/填充），一旦您有权访问元素，就可以执行此操作：
```
// Initializing the map:
const elementData = new WeakMap();
// Adding an entry to it:
elementData.set(theElement, {my: "data"});
// Getting an entry form it:
const data = elementData.get(theElement);
if (data) {
    // It was there, use it...
}
```
将数据直接存储在元素上，作为“expando”属性。一旦你有一个元素的引用（来自getElementById，querySelector或任何其他方式），你可以通过赋值来创建一个属性：
```
theElement.__myExpandoProperty = {my: "data"};
```
这很好地绑定了元素，不需要单独的数据缓存和随之而来的问题，在清理元素时会清理它等等。

但问题是现在我们将自己的属性存储在DOM元素上。这会增加与DOM本身使用的属性或其他脚本使用的冲突的可能性，因此使用极不可能与其他东西发生冲突的名称非常重要。

另外，在现在过时的IE版本中，包含对象的expandos（如上所述）有可能防止垃圾收集。
对于字符串数据，使用元素See Here上的data-*属性。我没有在原始列表中包含这个，因为我在考虑复杂的数据，但对于简单的事情，这绝对是一个选择。

jQuery（v2和更早版本）结合了＃1和＃2：它为元素添加了一个字符串expando属性，以便为它提供一个ID（一个简单的字符串，以避免现在过时的IE版本出现问题），以及使用单独的数据缓存。

Answer 3

首先，你用td获得附加值的方式是错误的。

应该是

target.getAttribute('value')

不是

target.value

我认为另一个问题是玩家序列，

您正在检查

if(round === 1){

但是圆形的默认值= 0，所以它是第一个播放的播放器2。您应将round的默认值设置为1或首先将其与0进行比较。

只需更新代码https://jsfiddle.net/1c0dqk01/

即可

为html元素赋值并读取它

3 个答案: