javascript - 在插件函数中调用 html 数据集

Question

<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 页面，有多个部分，每个部分都有按钮。

单击按钮会触发插件，然后填充相关的部分标签。问题是，在插件回调中获取标签数据集，但“this”指示器不起作用:

$('.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 Learning Center页。所以我很困惑。谁能提供解决方案吗？

Answer 1

能否分享一下myDrawPlugin定义，以了解点击事件是如何绑定(bind)和处理的？

无论如何，onComplete回调中的this将引用传递给插件函数的对象(param)，因此如果您希望访问按钮元素数据，那么您需要当您在按钮单击时调用它时，将相应的元素引用传递给 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/