Как использовать атрибут "data-" кнопки для вызова выбранной функции JavaScript

Я пытаюсь установить некоторые данные на моих кнопках, чтобы к ним можно было получить доступ 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'
});

мысли?

11
custom-data-attribute html javascript jquery json

3 ответов

использовать следующий код, чтобы получить значения в HTML:

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

этот код специально для вашего требования. Таким образом, вы можете хранить данные в HTML и извлекать их в коде JavaScript.

обновлен код JSFiddle, рабочий код доступен по адресу:http://jsfiddle.net/NDaEh/51/

EDIT:

решение для динамического вызова функции : 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]();
});
27

Не сохранять объекты как строки JSON в значении свойства тега html. Вместо этого используйте метод 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;
}

Скрипка

6

используйте jQuery data как показано ниже:

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

использование:

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

для того, чтобы получить данные из элемента

1