学习使用js调用动态函数名(动态变量函数名)

JavaScript动态调用HTML数据属性指定的函数：解决eval使用问题

原创于 2024-02-21 14:09:26 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

Html 同时被 3 个专栏收录

262 篇文章

订阅专栏

Javascript

243 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

本文介绍如何在JavaScript中通过HTML的data-function属性动态获取函数名并调用，使用eval解决在直接调用时遇到的函数不存在错误。

学习使用js调用动态函数名-动态变量函数名

- 背景
- 代码

背景

函数名写在 html 上，在 js 中定义这个变量，js 报错该函数不存在，在此给出解决方法

代码

//html代码如下
<a data-function="qipa" class="clickMe">250</a>

//js代码
function qipa(){
    alert('奇葩250');
}

$('.clickMe').click(function(){
    var functionName = $(this).attr('data-function');
    //functionName();//直接运行报错
    //解决方案是 建立一个函数来调用functionName
    function tmpFunction(data){
         //如果要传递参数，则按照这种形式
         //eval(functionName + '(' + data + ')'); 
         //不传递参数，则按照这种形式
        eval(functionName + '()');
    }
    tmpFunction();
})