使用动态属性键获取 javascript 对象的属性值 [重复]

Question

我目前正在开发一个包含大量 SVG 动画的项目。当用户滚动到 SVG 时，需要触发这些动画。

我决定为每个 Snap.SVG 动画创建函数，并使用 SVG 的 ID 作为键将它们存储在对象数组中，如下所示：

//Example Object

var item = {
    aboutUsSVG: function(){
        //aboutUsSVG animation code to go here
    }
}

到目前为止，我已经在这里创建了我的代码的 Codepen：

http://codepen.io/decodedcreative/pen/mEpZbx

我成功地创建了对象数组。我有第二个功能，当 SVG 在屏幕上时播放动画。我无法使用动态键访问存储在数组中的动画函数。

如果我知道 SVG 的名称，我可以访问该函数：

var playAnimation = animations.animationsArray[0].ourCompanies;

playAnimation();

但我想写一个可以用于网站上所有动画的解决方案，所以希望在 DOM 中查询 SVG ID，然后查找相应的动画。

所以：

var animationID = $(this).find(".svg-animation svg").attr('id');
var playAnimation = svgAnimations.animationsArray[0].animationID;
playAnimation();

但在上面的代码中，animationID 是按字面意思使用的，而不是被 aboutUs 函数替换。

我认为这是一个相当常见的 JS 问题。有人可以帮忙吗？

Answer 1

要使用变量访问数组的属性，您需要使用括号表示法：

var animationID = $(this).find(".svg-animation svg").prop('id');
svgAnimations.animationsArray[0][animationID]();

Answer 2

您可以使用括号表示法来访问具有动态变量的对象属性

检查下面的代码

var animationID = $(this).find(".svg-animation svg").attr('id');
var playAnimation = svgAnimations.animationsArray[0][animationID];
playAnimation();