我需要在 classList 模板字符串 javascript 中递增一个数字

Question

你好，朋友们，我遇到了一个难题，我有点不知所措在我的二十一点游戏中，我创建了（纸牌的）图像，值来自对象列表中的 .PNG 名称。我想要做的是能够在这些图像上创建一个 class 以便能够在其他函数中使用 classList.contain() 方法。它似乎有效，但每次我调用该函数时数字都不会增加。所有卡片都具有相同的 class.

函数 showCard(activePlayer, card) {

if (activePlayer.score <= 20){
    
    let cardImage = document.createElement("img")
    function incrementNumber(number){
        number = number++
        return number
    }
    //increment the number of the class
    cardImage.classList.add(`images${incrementNumber()}`)
    cardImage.src = `images/${card}.png`
    document.querySelector(activePlayer["div"]).appendChild(cardImage)
    hitSound.play() 
}

} 我知道我很可能忘记了一件简单的事情，但我无法确定。我在 ${incrementNumber(1)} 中添加了一个数字，仍然为所有图像提供相同的图像 class。谢谢你的帮助！

Answer 1

将全局变量添加到名为 number 的范围并将其设置为 1。然后将 number = number++ 替换为 number++.

Answer 2

++（递增）运算符有时会令人困惑。

在您的例子中，您正在使用它，但您也将其 return 值分配回数字。最简单的解决方案是不进行该分配（将 number = number++ 更改为 number++）

看起来 number 应该是一个全局变量，而不是传递给 incrementNumber 函数的参数。

这个问题更有趣的部分是为什么代码不起作用。这是由于 ++ 运算符的工作方式。当你把它放在变量名之后时（例如 number++），JavaScript 将有效地做到这一点：

var temp = number;
number = number + 1;
return temp;

它将 number 变量递增 1，但它 return 是变量的先前值。你的情况，当把number++的结果赋值给number的时候，自增操作基本上就被抵消了。

另外，请注意您可以将 ++ 运算符放在变量名之前（如 ++number）。这不会 return 变量的原始值，而是 return 新的（增加的）值。

我需要在 classList 模板字符串 javascript 中递增一个数字

i need to increment a number in a classList template string javascript

javascript

html

function

increment

template-strings