javascript - 按名称调用 Javascript 函数

Question

如果我在页面上有这样的元素......

<span data-function="DoSomething">Click</span>

...我把它放在我的页眉中...

$(document).ready(function() 
{ 
   $('[data-function]').each(function()
   {
       var fName = $(this).attr('data-function');
       $(this).click(fName);
   });
});

...代替注释的内容会产生执行名为“DoSomething”的函数的预期效果。

注意：我没有上面的代码不起作用，我的问题是如何使它起作用（将'DoSomething'翻译成DoSomething（）;）

有什么想法吗？

Answer 1

这些功能应该可用。尝试将它们放入对象中，如下所示：

$(document).ready(function() 
{ 
   var fns = {
      DoSomething: function() {/* ... */},
      DoAnotherthing: function() {/* ... */}
   };
   $('[data-function]').each(function()
   {
       var fName = $(this).attr('data-function');
       $(this).click(fns[fName]);
   });
});

这是一个 jsfiddle，演示了一种将所有内容保持在一个命名空间本地并根据data元素的属性分配处理程序的方法。

Answer 2

尝试使用窗口对象调用函数 -

$(document).ready(function()  {
        $('[data-function]').each(function() {
            var fName = $(this).attr('data-function');

            if (typeof (window[fName]) === "function") {
                $(this).click(window[fName]); 
            }
        });  
}

Answer 3

你可以使用类似的东西

$(this).click(window[fName]);

如果函数未在全局范围内定义，则wherewindow将被适当的表达式替换。DoSomething

Answer 4

也许有点干净的方式：

http://jsfiddle.net/whsPG/

var myfuncs = {
  alert : function() {
        alert("An Alert");
    },
    changeName: function(obj) {
        $(obj).text('Other Text');
    }    
};

$('[data-function]').on('click', function()
{
  value =  $(this).data('function');

   if (myfuncs.hasOwnProperty(value)) {
     myfuncs[value](this);
   }

}); ​</p>