使用具有 classlist 属性的模板文字

Question

javascript 这里是新手。我正在尝试实现模板文字以更改变量名称的第二部分，同时使用 classlist 属性调用切换方法。这是我拥有的：

bigBoxRight.classList.toggle("turnOff");

这就是我要实现的目标：

bigBox`${player}`.classList.toggle("turnOff");

Player 可以是“Right”或“Left”，它是一个字符串。这甚至可能吗？

Answer 1

我要做的是保存另一个变量，它将根据您的决定获取您需要的元素然后获取它的类列表

例如

const bigBoxRight = docemnt.querySelector...
const bigBoxLeft = docemnt.querySelector...

const elemRef = true* ? bigBoxRight : bigBoxLeft 

elemRef.classList.toggle("turnOff");

*-  Your logic for when you need the right or the left  bigbox element

如果您知道何时需要右元素或左元素，Tim 的解决方案可能会更清晰

Answer 2

与其尝试动态创建变量名，不如先获取要尝试切换 class 的元素。

假设 bigBoxRight 或 bigBoxLeft 是元素的 id，您可以使用模板字面量先获取元素：

var elem = document.querySelector(`#bigBox${player}`)

那么你可以这样做：

elem.classList.toggle("turnOff");

使用具有 classlist 属性的模板文字

using template literals with classlist attribute

javascript

methods

attributes

template-literals