时间戳

首页 > 解决方案 > 如何从数据属性执行功能

javascript - 如何从数据属性执行功能

问题描述

<div id='dgok' data-fn="delbanner('banners')">OK</div>

js 

$('#dgok').click(function(){
    let fn = $(this).attr('data-fn');
    console.log(fn) // delbanner('banners')
    fn();
});

错误：

Uncaught TypeError: fn is not a function

在这种情况下如何执行delbanner('banners')（点击dgok）？

标签： javascriptjquery

解决方案

避免eval您可以尝试基于通过某些容器访问函数的方法（window例如）：

const fnContainer = window;
$('#dgok').click(function(){
    const fn = $(this).attr('data-fn');
    const fnName = fn.substring(0, fn.indexOf('(')); // 'delbanner'
    const fnArg = fn.substring(fn.indexOf('(') + 2, fn.length - 2); // 'banners'
    if (typeof fnContainer[fnName] === 'function') {
      fnContainer[fnName].apply(fnContainer, [fnArg]); // window[fnName](fnArg);
    }
});

在这里，我假设您的函数已定义window并具有 1 个字符串参数。

将函数参数放在单独的数据属性中，该方法可能看起来更简单

const fnContainer = window;
$('#dgok').click(function(){
    const fnName = $(this).attr('data-fn');
    const fnArg = $(this).attr('data-arg');
    if (typeof fnContainer[fnName] === 'function') {
      fnContainer[fnName].apply(fnContainer, [fnArg]); // window[fnName](fnArg);
    }
});

推荐阅读