使用带有 classlist 属性的模板文字答案

【问题标题】：using template literals with classlist attribute使用带有 classlist 属性的模板文字
【发布时间】：2021-09-15 04:52:00
【问题描述】：

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

bigBoxRight.classList.toggle("turnOff");

这就是我想要完成的：

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

玩家既可以是“右”也可以是“左”，它是一个字符串。这甚至可能吗？

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript methods attributes template-literals

【解决方案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 的解决方案可能会更简洁

【讨论】：

【解决方案2】：

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

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

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

那么你可以这样做：

elem.classList.toggle("turnOff");

【讨论】：

是的，但这就是我试图避免的