2017-01-02 152 views
0

我有一個對象如何將變量(字符串)添加到現有對象?

this.ui.list 
this.ui.grid 

這些點到節點元素的DOM已經

目前,我有兩個按鈕,「網格」,「列表」。網格默認有一個活動的類,而List沒有。我在這兩個上都有一個click事件監聽器,當你點擊Grid時,它應該刪除Active類,並將它添加到另一個兄弟List中。

ex。如果電網

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 /開關

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 }) 

因爲我可以得到當前的風格和兄弟風格....'list','grid',它將如何用變量I替換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?

回答

0

所以,經過一番思考......我終於決定採用這種解決方案。如果有更好的東西,請讓我知道。

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 })