如何使用JavaScript变量在不同条件下引用两个以上的值？

Question

嘿，我正在编写一个JavaScript简单的游戏程序，我的程序有两个玩家1和2，我想写一个语句，试图说：“如果是为播放器转，在某个元素中添加一个隐藏类，然后执行一些条件。如果是第二个回合，也要这样做。”是的，我知道一种方法，但它是相当长的，我想尝试这种方式，但我得到了一个错误，我能做什么。下面是我代码的一部分。

​

"using strict";

const PLAYER_1_ELEMENT = document.querySelector(".player-1");
const PLAYER_2_ELEMENT = document.querySelector(".player-2");
const TOTAL_1_ELEMENT = document.querySelector(".total-1");
const TOTAL_2_ELEMENT = document.querySelector(".total-2");
const BTN_TRY_LUCK = document.querySelector(".top");
const BTN_RESET_LUCK = document.querySelector(".bottom");
const CURRENT_1_ELEMENT = document.querySelector(".borders-1");
const CURRENT_2_ELEMENT = document.querySelector(".borders-2");
const IMAGES_1 = document.querySelector(".images-1");
const IMAGES_2 = document.querySelector(".images-2")


let player = [1,2];

//statement giving me errors
IMAGES_${player[1]}.classList.add("hidden");

//below are the conditions i want it to execute

if(IMAGES_${player[1]}.classList.contains(".active")) {
    //...................
    //..................
}

​

Answer 1

主要的问题是这个IMAGES_${player[1]} -似乎您试图使用一个模板字符串来引用一个变量。

您拥有的代码是无效的语法，因为模板字符串需要包装在backticks `中。

这是可以完成的，但是您需要首先引用父变量，然后通过传递变量名作为索引来获得值。例如：

window[`IMAGES_${player[1]}`]

假设这些变量是在根目录下声明的，而不是在单独的作用域内声明，则这是可行的。

为了确保无论作用域如何调用正确的变量，可以将它们全部存储在如下所示的对象中：

"use strict";

const data = {
    PLAYER_1_ELEMENT : document.querySelector(".player-1"),
    PLAYER_2_ELEMENT : document.querySelector(".player-2"),
    TOTAL_1_ELEMENT : document.querySelector(".total-1"),
    TOTAL_2_ELEMENT : document.querySelector(".total-2"),
    BTN_TRY_LUCK : document.querySelector(".top"),
    BTN_RESET_LUCK : document.querySelector(".bottom"),
    CURRENT_1_ELEMENT : document.querySelector(".borders-1"),
    CURRENT_2_ELEMENT : document.querySelector(".borders-2"),
    IMAGES_1 : document.querySelector(".images-1"),
    IMAGES_2 : document.querySelector(".images-2")
}


let player = [1,2];

//statement giving me errors
data[`IMAGES_${player[1]}`].classList.add("hidden");

//below are the conditions i want it to execute

if(data[`IMAGES_${player[1]}`].classList.contains(".active")) {
    //...................
    //..................
}

Answer 2

与创建具有计算名称的变量并引用它们不同，在JavaScript中生成包含数组的对象更容易。此对象(此处为：elems)可以具有本地作用域，而不必是全局可见的。

​

const elems={};
"player,total,borders,images".split(",").forEach(el=>elems[el]=document.querySelectorAll(`[class^=${el}-]`));

// Now you can reference the player-related elements
// by doing:

// elems["borders"][0] ... // or
// elems.borders[0] ... // player 1

// elems["borders"][1] ... // or
elems.borders[1].classList.add("active") // player 2 

.active {color:red}

<h2>Players 1 and 2</h2>
<div class="borders-1">player 1 borders element</div>
<div class="borders-2">player 2 borders element</div>

​

在上面非常短的片段中，elems包含DOM元素的集合，而不是实际的数组。这些集合按照player1和player2元素在页面上的显示顺序包含它们。集合中的元素可以通过索引来处理。集合也有一个.forEach()方法，但是您将无法访问常规的数组方法，如.map()或.reduce()。

如果您想拥有实际的数组，只需通过以下操作创建它们

arr=[...collection]