javascript - 使用动态属性键获取 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]();