javascript - 创建多个相同的 DOM 元素图像

Question

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

每次我去为玩家做第二步时，DOM 图像都会消失并重新出现在新选择的方 block 中。显然，这不是所需的操作。关于创建 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)
    }
  }
}

'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 中)，然后 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());
    }
  }
}