Question

鉴于我们正在使用的当前CMS，我需要在自定义数据属性中调用函数。是否可以将数据属性的内容作为函数调用，如下所示运行？简单的例子：

集

 <button data-function="alert('hello world')">Run Function</button>

运行

$('button').attr('function');

我相信以上只是获取内容而不是在写入时实际执行任何操作。

这可能吗？

Answer 1

您可以从数据属性创建Function：

// create
var funcStr = $('button').data('function');
var f = new Function(funcStr);

// invoke
f();

请参阅MDN

Answer 2

如果您想执行代码，则必须致电eval。您还需要使用属性的全名，或使用.data()。

eval($('button').attr('data-function'));

或

eval($('button').data('function');

Answer 3

您始终可以使用eval功能。

eval($('button').attr('data-function'));

Answer 4

如果函数已知，这是另一种方法。

＆＃13;

     $(document).ready(function() {
       $('button').click(function() {
         var functionObject = JSON.parse($('button').attr('data-function'));
         window[functionObject.name].apply(window, functionObject.arguments);
       });
     });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button data-function='{"name": "alert", "arguments" : ["hello world"]}'>Run Function</button>

＆＃13;

它解析data-function属性中的JSON字符串。使用窗口对象调用name提供的函数（消除eval）并使用apply将参数（在数组内）传递给函数。

在自定义data-attr中调用函数？

4 个答案: