时间戳

首页 > 解决方案 > 触发以名称为变量名的函数

jquery - 触发以名称为变量名的函数

问题描述

$('.dgok').click(function(){
var fn = $(this).attr('data-fn');
console.log(fn); // abc
fn();
});

function abc(){
console.log('abc');
}
.dgok{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='dgok' data-fn='abc'>OK</div>

结果： Error fn is not a function...

有没有办法做到这一点？

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

标签： jquery

解决方案

动态访问函数名通常是代码异味，但如果您abc在顶层，则可以访问window[fnName]，其中fnName是包含函数名的字符串。精确的变量名很重要——你fn的不是一个函数，而是一个字符串，所以最好把它称为一个更清楚地表明它是一个字符串的东西（通过尝试调用它来减少自己混淆的机会）。例如：

$('.dgok').click(function() {
  var fnName = $(this).attr('data-fn');
  window[fnName]();
});
function abc() {
  console.log('abc');
}
.dgok {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='dgok' data-fn='abc'>OK</div>

如果您不在顶层，abc则无法使用 - 改用由函数名称索引的对象：window[fnName]

(() => {
  const fns = {
    abc: () => console.log('abc')
  };
  $('.dgok').click(function() {
    var fnName = $(this).attr('data-fn');
    fns[fnName]();
  });
})();
.dgok {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='dgok' data-fn='abc'>OK</div>

推荐阅读