JavaScript classList模板字符串中数字无法递增问题求助

• 计数变量的作用域错误：你把incrementNumber函数定义在了showCard内部，且没有外部持久化存储的计数器，每次调用showCard都会重置计数逻辑，无法保留之前的序号值。
• 自增语法逻辑错误：number = number++是无效的自增写法，后置自增运算符会先返回变量的原始值再做自增，赋值操作会把原始值重新赋给number，最终数值完全没有变化。
• 调用逻辑错误：你调用incrementNumber时没有传入持久化的计数变量，就算每次传1，返回的永远是相同值，自然所有类名一致。

把计数器变量定义在showCard函数的外部作用域，每次调用函数时直接对全局计数器做自增即可，不需要单独封装incrementNumber函数，简化后逻辑如下：

// 在showCard外部定义全局计数器，初始值为0
let cardIndex = 0

function showCard(activePlayer, card) {
  if (activePlayer.score <= 20){
    let cardImage = document.createElement("img")
    // 先自增再使用，保证第一个类名从images1开始
    cardIndex++
    cardImage.classList.add(`images${cardIndex}`)
    cardImage.src = `images/${card}.png`
    document.querySelector(activePlayer["div"]).appendChild(cardImage)
    hitSound.play() 
  } 
}

如果你需要给不同玩家单独计数，也可以把计数器绑定到activePlayer对象上，修改如下：

function showCard(activePlayer, card) {
  if (activePlayer.score <= 20){
    let cardImage = document.createElement("img")
    // 玩家没有计数属性就初始化，否则直接自增
    activePlayer.cardIndex = activePlayer.cardIndex ? activePlayer.cardIndex + 1 : 1
    cardImage.classList.add(`images${activePlayer.cardIndex}`)
    cardImage.src = `images/${card}.png`
    document.querySelector(activePlayer["div"]).appendChild(cardImage)
    hitSound.play() 
  } 
}

内容的提问来源于stack exchange，提问作者Pierre-Yves Roy