如何使用按钮的“data-”属性调用选定的 JavaScript 函数答案

【问题标题】：How to use a button's "data-" attribute to call a selected JavaScript function如何使用按钮的“data-”属性调用选定的 JavaScript 函数
【发布时间】：2012-10-01 21:08:33
【问题描述】：

我正在尝试在我的按钮上设置一些数据，以便可以访问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'
});

想法？

【问题讨论】：

标签： javascript jquery html json custom-data-attribute

【解决方案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]();
});

【讨论】：

感谢@IvenMS，但我想要的关键是 data.option1 本身就是一个函数，而不仅仅是一个字符串。所以写 data.option1(data) 调用警报函数，反之亦然。
试试这个：var alert_data='hello outside'; function option1 (data){ alert(data) } $('button').click(function(){ var data = $.parseJSON($(this).attr('data-button')); window[data.option1](alert_data); });
这个想法是使用window["function_name"](arguments); 运行文档中声明的函数。请检查....
我理解这个概念，但你的代码不起作用，它给出了同样的错误 option1 不是我第一次得到的函数
试试这个链接：jsfiddle.net/NDaEh/66 它正在工作。概念略有不同，但逻辑相同。

【解决方案2】：

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

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

另外，当你写这篇文章时：

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

option1 需要成为一个插件才能链接到 data 方法（或任何 jquery 方法）。你需要这样的东西：

jQuery.fn.option1 = function () {

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

   return this;
}

Fiddle

【讨论】：

为什么我不能将对象保存为 JSON 字符串？我也不想使用 JS b/c 生成这些数据，它将在我的应用程序中高度可变，我已经花时间用服务器端代码生成它（逻辑连接在我的 mysql 数据库中）
@timpeterson 好吧，html 标签属性值应该用双引号括起来。 JSON 字符串也应该如此。所以我不会推荐它。您最终会得到无效的 html 或 json。
@timpeterson 您如何从服务器获取数据？通过阿贾克斯？还是您只是将其直接打印到 html 中？你使用什么服务器端语言？
@timpeterson 抱歉耽搁了，我去吃午饭了。查看我发布的小提琴。这是你需要的吗？
@timpeterson 如果你想编写一个自定义的 jquery 方法（又名插件），那就是它的完成方式（换句话说，只要你想直接在 jquery 对象上使用你的方法）。如果您不想这样做，您可以提取数据对象并将其传递给您的常规函数并在那里处理它。

【解决方案3】：

使用jQuerydata如下图：

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

用途：

$('input[type=button]').data('button-data');  //{ option1: 'option1', option2: 'option2}

为了从元素中获取数据

【讨论】：