変数（文字列）を既存のオブジェクトに追加するにはどうすればよいですか？

Question

私は現時点ですでに

DOMのNode要素にオブジェクト

this.ui.list 
this.ui.grid 

にこれらのポイントを持って、私は2つのボタン、「グリッド」、「リスト」を持っています。グリッドにはデフォルトで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要素をフェードインされます。

私は例えば、グリッド上でクリックしたときに、私は兄弟データ属性をチェックすることにより、単語のリストを取得することができ、私は動的にコピー/貼り付けを回避するために、以下これらを使用したい、と/ /それ以外は

を切り替える場合は使用を避けているので

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'を得ることができるので、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 })