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

由于我可以获得当前样式和兄弟样式....'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 })

如何将变量（字符串）添加到现有对象？

1 个答案: