创建同一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)
}
}
}

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