创建同一个DOM元素映像的倍数

Question

我是一个新的开发人员，正在开发一个Tic Tac Toe SPA。我有一个工作游戏，但我想定制游戏令牌。我尝试过用几种不同的方式创建DOM元素，这些方法都很成功。以下是问题所在：

每次我为播放器做第二次移动时，DOM图像就会消失，并在选定的新方块中重新出现。显然，这不是期望的行动。关于创建DOM元素我还不知道什么。我在谷歌上搜索过这个，看过无数的文章，看过无数的视频。

​

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

​

“转身”是一个变量，它使用一个切换函数在玩家和商店之间切换，不管玩家转到哪一个(即“斯塔克”)

如果有人能为我指明一个资源的方向，我将非常感激，在那里我可以学到更多有关这方面的知识。

​

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中)被删除，然后插入到新的位置。听起来，您需要做的是每次都显式地创建一个新元素，您可以使用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());
    }
  }
}