如何使用动态名称调用 jQuery 函数？

Question

我不敢相信我一直无法找到解决这个问题的方法。在我看来，这是一个非常 "regular" 的问题，其解决方案会在网络上乱扔垃圾！

我从数据库查询中返回了这些数组：

var ids = ['12', '15', '40'];
var actions = ['hide', 'show', 'fadeIn'];

我想遍历数组并对 DOM 执行适当的操作，如下所示：

for(var i=0; i < ids.length; i++){
    $('#row_'+ids[i]).actions[i]();
}

现在你明白了。实际上我没想到 $('#row_'+ids[i]).actions[i](); 会按原样工作。我尝试过

$('#row_'+ids[i]).effect(actions[i]);

无济于事。我相信 eval() 应该可以工作并且（在绝望中）甚至尝试过但无法获得正确的字符串来工作。

在 Stack Overflow 的其他地方，我遇到了使用 window 全局解决的类似问题，例如：

var fn = 'hideSomething';
window.fn();//where hideSomething was a defined function.

但是这个是在 jQuery 上定义的，而不是在 window 上定义的。

我们到了！

Answer 1

您需要使用 [varhere] 通过变量名访问 property/method。由于你的属性名字在 actions[i] 中，那么你会这样做：

$('#row_'+ids[i])[actions[i]]();

或者，在一个更简单的方案中，可以准确地了解正在发生的事情：

var method = actions[i];
$('#row_'+ids[i])[method]();

当属性名称提前已知时，您可以使用点语法 obj.prop。当它在变量中并且事先不知道时，您可以使用 obj[prop] 语法。由于一个方法只是一个属性，这同样适用于 jQuery 个方法。

for(var i=0; i < ids.length; i++){
    $('#row_'+ids[i])[actions[i]]();
}

Answer 2

使用方括号表示法访问属性:

for (var i = 0; i < ids.length; i++) {
  $('#row_' + ids[i])[actions[i]]();
}

How do I call a jQuery function with a dynamic name?