Вызов набора данных html в функции плагина
<button class = "draw-sector-button" data-sector_no = "0">Draw first</button>
<section id = "section-0"></section>
<button class = "draw-sector-button" data-sector_no = "1">Draw second</button>
<section id = "section-1"></section>
HTML-страница имеет несколько разделов и кнопок в каждом.
Нажатие кнопки запускает плагин, затем он заполняет соответствующий тег раздел. Проблема в том, что набор данных тегов получается внутри обратного вызова плагина, но индикатор "это" не работает:
$('.draw-sector-button').myDrawPlugin({ // my data table generator
param1 : 'foo',
param2 : 'bar',
onComplete : function(result) {
var i = $(this).data('sector_no'); // (i : undefined)
$('#section-'+i).html(result.data_table);
}
});
Они говорят обратное: «у вас есть доступ к фактическому узлу изображения через ключевое слово this в обратном вызове». на странице Учебный центр JQuery. Так что я в замешательстве. Кто-нибудь может предложить решение?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Не могли бы вы поделиться определением myDrawPlugin, чтобы понять, как связывается и обрабатывается событие клика?
В любом случае, это внутри обратного вызова onComplete будет ссылаться на объект (параметр), переданный функции плагина, поэтому, если вы хотите, чтобы данные элемента кнопки были доступны, вам нужно tp передать ссылку на соответствующий элемент обратному вызову onComplete, когда вы вызываете его на кнопке нажмите.
Посмотрите, работает ли этот способ обработки для вас,
$.fn.myDrawPlugin = function(opts) {
// Button click handling
$(this).on("click", function(){
opts.onComplete(this, {data_table: "<div>Hello World!</div>"});
});
};
$('.draw-sector-button').myDrawPlugin({ // my data table generator
param1 : 'foo',
param2 : 'bar',
onComplete : function(element, result) {
var i = $(element).data('sector_no');
$('#section-'+i).html(result.data_table);
}
});
рабочий фрагмент: https://jsfiddle.net/d7g8kb1j/1/
Хорошая идея: вернуть ссылку на элемент из плагина. Спасибо, это работает. Я забыл разместить код плагина, но вы хорошо угадали структуру. $(element).data('sector_no') получает правильное значение, как указано в атрибуте html. Также в этом сценарии хорошо работает element.data('sector_no').