时间戳

首页 > 解决方案 > 井字游戏的 Javascript 对象

javascript - 井字游戏的 Javascript 对象

问题描述

在这里完成关于 Javascript 主题的新手。我正在尝试编写井字游戏，同时使用 JS 的对象来节省代码空间。我想我可能会创建一个 JS 对象，它将 HTML 代码中定义的所有 9 个字段以 ids 'one' 到 'nine' 作为值，然后还有一个自定义方法可用于交换 value 的 textContent，如下所示：

var fields = {
    one: document.querySelector('#one'),
    two: document.querySelector('#two'),
    three: document.querySelector('#three'),
    four: document.querySelector('#four'),
    five: document.querySelector('#five'),
    six: document.querySelector('#six'),
    seven: document.querySelector('#seven'),
    eight: document.querySelector('#eight'),
    nine: document.querySelector('#nine'),
    swap: function(element) {
        if (this.element.textContent === "") {
            this.element.textContent = "X";
        } else if (this.element.textContent === "X") {
            this.element.textContent = "O";
        } else {
            this.element.textContent = "";
        }
    }
}

然后，我想我会像这样添加一堆 addEventListeners：

fields['one'].addEventListener('click', fields.swap(fields['one']));

问题是，我可能完全把这个概念当作它在 Python 中运行的方式来对待，而且我可能在这里弄乱了语法。谁能给我一些关于我在哪里出错的想法？

上面复制的代码目前不起作用。

它使用的 HTML 如下（我在这里省略了格式以节省空间）：

<body>
  <div class="container">
    <table id="gameboard">
      <tr class="row">
      <td id="one" class="gameField">X</td>
      <td id="two" class="gameField">X</td>
      <td id="three" class="gameField">X</td>
    </tr>
    <tr class="row">
      <td id="four" class="gameField">X</td>
      <td id="five" class="gameField">X</td>
      <td id="six" class="gameField">X</td>
    </tr>
    <tr class="row">
      <td id="seven" class="gameField">X</td>
      <td id="eight" class="gameField">X</td>
      <td id="nine" class="gameField">X</td>
    </tr>
  </table>
</div>

标签： javascripteventsjsobject

解决方案

将你的交换功能从你的对象中分离出来，然后一起摆脱这个对象。将一个类添加到您希望添加 EventListener 的所有 HTMLElement，然后使用以下命令查询它们：

<div id="one" class="your-class"></div>
<div id="two" class="your-class"></div>

function swap(element) {
   if (element.textContent === ""){
      element.textContent = "X";
    }else if (element.textContent === "X") {
      element.textContent = "O";
    }else {
      element.textContent = "";
    }
}

document.querySelectorAll('.your-class').forEach(function (element) {
   element.addEventListener('click', swap(element));
});

推荐阅读