web-dev-qa-db-ja.com

ボタンの「data-」属性を使用して、選択したJavaScript関数を呼び出す方法

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'
});

考え？

javascriptjqueryhtmljsoncustom-data-attribute
12
tim peterson

次のコードを使用して、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]();
});
28
IvenMS

オブジェクトをhtmlタグのプロパティ値にJSON文字列として保存しないでください。代わりにdata（）メソッドを使用してください。

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

また、あなたがこれを書いているとき：

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

option1は、データメソッド（または、jqueryメソッド）にチェーンするためにプラグインである必要があります。次のようにtomethingする必要があります。

jQuery.fn.option1 = function () {

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

   return this;
}

フィドル

7
Johan

以下に示すように、jQuery dataを使用します。

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

使用する：

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

要素からデータを取得するために

2
udidu