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

Question

我正在尝试在我的按钮上设置一些数据,以便可以访问它onclick.我在按钮的数据属性中使用JSON没有问题,其中键值是一个字符串.但是,我无法弄清楚如何将值设置为函数.

单击此演示代码中的按钮,我想要发生的是click事件调用该函数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]();
});

Answer 2

不要将对象保存为html标记属性值中的JSON字符串.请改用data()方法.

$('input[type="button"]').data({ option1: 'o1', option2: 'o2' });

另外,当你写这篇文章时:

$(this).data('button').option1(data);

option1需要是一个插件才能被链接到数据方法(或任何jquery方法).你需要这样的东西:

jQuery.fn.option1 = function () {

   alert($(this).data('option1'));

   return this;
}

小提琴