javascript - 如何使用按钮的 "data-"属性调用选定的 JavaScript 函数

Question

我正在尝试在我的按钮上设置一些数据，以便可以访问 onclick。我在键值为字符串的按钮的数据属性中使用 JSON 没有问题。但是，我不知道如何将值设置为函数。

在此演示代码中，我希望在单击按钮时发生的情况是单击事件调用函数 option1()，该函数将警告字符串“hello outside”。

我得到的错误是这样的:

Uncaught TypeError: Property 'option1' of object #<Object> is not a function

HTML(JSFiddle 在这里:http://jsfiddle.net/NDaEh/32/):

<button type='button' data-button='{"option1": "option1", "option2": 
"option2"}'>click1</button>

JS:

var data='hello outside';
var option1=function(data){
    alert(data)
}  

$('button').click(function(){
  //var data='hello inside';
  $(this).data('button').option1(data); // should alert 'hello outside'
});

想法？

Answer 1

使用以下代码获取 HTML 中的值:

$('button').click(function(){
  var data = $.parseJSON($(this).attr('data-button'));
  alert(data.option1)
});

此代码专门针对您的要求。通过这种方式，您可以在 HTML 中存储数据并在 JavaScript 代码中检索。

更新了 JSFiddle 代码，工作代码位于:http://jsfiddle.net/NDaEh/51/

编辑:

动态调用函数的解决方案:http://jsfiddle.net/NDaEh/70/ HTML:

<button type='button' data-button='{"func": "func1"}'>click1</button>
<button type='button' data-button='{"func": "func2"}'>click2</button>

JS:

var myFuncs = {
  func1: function () { alert('Function 1'); },
  func2: function () { alert('Function 2'); },
};

$('button').click(function(){
  var data = $.parseJSON($(this).attr('data-button'));

  myFuncs[data.func]();
});