Question

我有以下代码

class battleShips {
  constructor(squareNr) {
    this.squareNr = squareNr;
    this.createField();
  }
  createField() {
    let shipsCount = 0;
    for (let i = 0; i < this.squareNr; i++) {
      let fieldSquare = document.createElement("div");
      fieldSquare.className = "squareStyle";
      document.querySelector(".arrayWrap").appendChild(fieldSquare);
      fieldSquare.setAttribute("value", "false");
      this.selectShips(fieldSquare, shipsCount);
    }
  }
  selectShips(square, count) {
    square.addEventListener("click", function() {
      if (square.getAttribute("value") === "false") {
        square.setAttribute("value", "true");
        square.style.backgroundColor = "green";
        count += 1;
        console.log(count);
        document.querySelector(".shipCounter").textContent = "You have selected " + count + " ships";
      } else {
        square.setAttribute("value", "false");
        square.style.backgroundColor = "white";
        count -= 1;
        document.querySelector(".shipCounter").textContent = "You have selected " + count + " ships";
      }
    })
  }
}

var a = new battleShips(25);

.arrayWrap {
  height: 500px;
  width: 500px;
  border: black solid;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.squareStyle {
  height: 98px;
  width: 98px;
  border: 1px black solid;
}

<div class="arrayWrap"></div>
<p class="shipCounter"></p>

我想要实现的是每次单击一个正方形时，shipsCount变量会增加1，但正如您在下面的段落中所看到的，如果我记录计数变量，它只会增加一次，不要超过1。

为了使其按预期工作，我可以改变什么？

Answer 1

您需要将count存储为类实例的属性。到目前为止，您只需将其置于本地，因此在单击功能完成后将其删除。因此，只需将以下行添加到构造函数中：

this.count = 0;

并在增量/减量功能中使用它。而已！ ; - ）

编辑：这不是全部。我们这里还有一个尚未解决的范围问题。关键字this在事件处理程序中有另一个上下文。这个this不是类范围，例外，它是该事件处理程序的范围，在我们的例子中是单击处理程序。许多开发人员陷入困境的非常讨厌的JavaScript问题。我这次也是。对不起。下面您将看到普通旧JavaScript中的完整工作代码示例。每次该类的实例都给出事件处理程序不是一个很好的方法，但是它有效（参见consoloe日志，它实际上是向上或向下计数的同一个实例）：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        class battleShips
        {
          constructor(squareNr)
          {
            this.squareNr = squareNr;
            this.createField();
            this.count = 0;
          }

          createField()
          {
            let shipsCount = 0;
            for (let i = 0; i < this.squareNr; i++) {
              let fieldSquare = document.createElement("div");
              fieldSquare.className = "squareStyle";
              document.querySelector(".arrayWrap").appendChild(fieldSquare);
              fieldSquare.setAttribute("value", "false");
              this.selectShips(fieldSquare, this);
            }
          }

          selectShips(square, battleShipsInstance)
          {
            square.addEventListener(
                "click",
                function() {
                    if (square.getAttribute("value") === "false") {
                        square.setAttribute("value", "true");
                        square.style.backgroundColor = "green";
                        battleShipsInstance.count++;
                        console.log("Battleships count=", battleShipsInstance.count);
                        console.log("Battleships instance", battleShipsInstance);
                        document.querySelector(".shipCounter")
                            .textContent = "You have selected "
                            + battleShipsInstance.count
                            + " ships";
                    } else {
                        square.setAttribute("value", "false");
                        square.style.backgroundColor = "white";
                        battleShipsInstance.count--;
                        document.querySelector(".shipCounter")
                            .textContent = "You have selected "
                            + battleShipsInstance.count
                            + " ships";
                    }
                }
            );
          }
        }

        document.addEventListener(
            "DOMContentLoaded",
            function(event) {
                var a = new battleShips(25);
            }
        );
    </script>
    <style type="text/css">
        .arrayWrap {
            height: 500px;
            width: 500px;
            border: black solid;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }

        .squareStyle {
            height: 98px;
            width: 98px;
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <div class="arrayWrap"></div>
    <p class="shipCounter"></p>
</body>
</html>

递增一个柜台

1 个答案: