递增一个柜台

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);

Run Code Online (Sandbox Code Playgroud)

.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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

我可以改变什么才能使其按预期工作？

Answer 1

alp*_*am8 5

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

this.count = 0;

Run Code Online (Sandbox Code Playgroud)

并在增量/减量功能中使用它.而已!;-)

编辑:这不是全部.我们这里还有一个尚未解决的范围问题.关键字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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年前
查看次数：	316 次
最近记录：	9 年前