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

Question

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

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

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] 通过变量名访问属性/方法。由于您的属性名称在 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]]();
}