Question

我是一名新开发人员，正在开发Tic Tac Toe SPA。我有一个正在运行的游戏，但我想自定义游戏令牌。我尝试了几种不同的方式来创建DOM元素，这些方法都是成功的。这是问题所在：

每次我为玩家采取第二步动作时，DOM图像都会消失并重新出现在所选的新方块中。显然，这不是所需的操作。关于创建DOM元素，我是否不了解某些内容。我已经在Google上搜索并阅读了无数的文章，并观看了无数的视频。

const stark = document.createElement('img')
  stark.src = 'https://i.imgur.com/d70XlET.png'
  stark.height = 80
  stark.width = 80

const lanister = document.createElement('img')
  lanister.src = 'https://i.imgur.com/d70XlET.png'
  lanister.height = 80
  lanister.width = 80

const play = (event) => {
  if (gameOver === false) {
    if (event.target.innerHTML === '') {
      $('#' + event.target.id).append(turn)
    }
  }
}

'turn'是与切换功能一起使用的变量，可在玩家之间进行切换并存储玩家所转过的那个玩家（即'stark'）

如果有人能指出我的资源方向，我可以对此有所了解，我将非常感激。

const player1 = stark
const player2 = lanister

let turn = player1
let prevTurn = player2

const togglePrevTurn = () => {
  if (!gameOver) {
    if (prevTurn === player1) {
      prevTurn = player2
    } else {
      prevTurn = player1
    }
  }
}

const toggleTurn = () => {
  if (!gameOver) {
    if (turn === player1) {
      turn = player2
    } else {
      turn = player1
    }
    $('#message').text(turn + " 's turn")
  }
}

Answer 1

每当您使用Javascript的appendChild或jQuery的append时，将其传递给元素时，都会将该元素从DOM中的先前位置移除（如果它位于DOM中）。 DOM），然后在新位置插入 then 。听起来您需要做的是每次都明确创建一个新元素，您可以使用cloneNode()来完成。

另外，最好最好精确地命名变量-如果turn是图像，则对其进行命名以明确表明它是图像，也许是currentPlayerImage。

此外，由于您已经引用了event.target，因此无需使用$('#' + event.target.id)重新选择-只需选择event.target：

const play = (event) => {
  if (gameOver === false) {
    if (event.target.innerHTML === '') {
      $(event.target).append(currentPlayerImage.cloneNode());
    }
  }
}

创建同一DOM元素图像的倍数

1 个答案: