如何使用 JavaScript 變量在不同條件下引用 2 個以上的值？

Question

嘿，我正在嘗試編寫一個 JavaScript 簡單的游戲程序，我的程序有兩個玩家 1 和 2，我想寫一個語句試圖說“如果輪到玩家，則為某個元素添加一個隱藏類，並執行一些條件。如果是玩家 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]} - 似乎您正在嘗試使用模板字符串來引用變量。

您擁有的代碼以無效的語法開頭，因為模板字符串需要包含在反`中

這可以做到，但是您需要先引用父變量，然后通過將變量名作為索引傳遞來獲取值。 例如：

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]