15

ボタンにアクセスできるように、いくつかのデータを設定しようとしていますonclick。キー値が文字列であるボタンのデータ属性でJSONを使用しても問題はありません。ただし、値を関数に設定する方法がわかりません。

このデモコードのボタンをクリックしたときに発生したいのは、クリックイベントが関数を呼び出してoption1()、文字列「hellooutside」を警告することです。

私が得ているエラーはこれです：

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

考え？

4

3 に答える 3

30

次のコードを使用して、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]();
});
于 2012-10-11T09:35:06.133 に答える
7

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

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

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

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

option1dataメソッド（またはそのことについては任意のjqueryメソッド）にチェーンするためには、プラグインである必要があります。あなたはこのようにtomethingする必要があるでしょう：

jQuery.fn.option1 = function () {

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

   return this;
}

フィドル

于 2012-10-11T08:59:05.760 に答える
2

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

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

使用する：

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

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

于 2012-10-11T09:03:33.623 に答える