如何向現有對象添加變量（字符串）？

Question

我有一個對象

this.ui.list
this.ui.grid

這些已經指向DOM上的Node元素

目前，我有兩個按鈕，“網格”，“列表”。 Grid默認有一個Active類，而List沒有。 我在兩者上都有一個click事件偵聽器，當您單擊Grid時，它應該刪除Active類，並將其添加到另一個同級List中。

例如 如果單擊網格

let siblingElement = utils.js.func.siblings(el.target), // list node
    siblingStyle = siblingElement[0].dataset.style, // outputs: list
    currentElement = el.target, // grid node
    currentStyle = el.target.dataset.style // outputs: grid


classes.remove(siblingElement[0], 'active')
classes.add(el.target, 'active')

這工作正常，現在我要做的是淡入/淡出顯示列表/網格的dom元素。

因為例如當我單擊網格時，我可以通過檢查同級數據屬性來獲得單詞列表，所以我想在下面動態使用它們以避免復制/粘貼，並避免使用if / else / switch

tl.to(this.ui.grid, 0.7, { autoAlpha: 0, display: 'none', ease: Expo.easeInOut })
tl.to(this.ui.list, 0.7, { autoAlpha: 1, display: 'block', ease: Expo.easeInout })

由於我可以獲得當前樣式和同級樣式....“列表”，“網格”，它將如何用上面設置的變量替換this.ui.grid，this.ui.list？ 我希望這不會造成混淆，但是基本上是這樣的（我知道這行不通）

tl.to(this.ui.[siblingStyle], 0.7, { autoAlpha: 0, display: 'none', ease: Expo.easeInOut })
tl.to(this.ui.[currentStyle], 0.7, { autoAlpha: 1, display: 'block', ease: Expo.easeInout })

Javascript甚至可能嗎？

Answer 1

因此，經過一番思考...。我終於決定采用此解決方案。 如果有更好的事情，請告訴我。

var choices = {
    "list" : this.ui.grid,
    "grid" : this.ui.list
}

// Fade Effect
tl.to(choices[currentStyle], 0.7, { autoAlpha: 0, display: 'none', ease: Expo.easeInOut })
tl.to(choices[siblingStyle], 0.7, { autoAlpha: 1, display: 'block', ease: Expo.easeInout })