使用动态属性键

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();