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 学习中心页面中。所以我很困惑。任何人都可以提供解决方案吗？

标签： javascriptjqueryjquery-plugins

Answer 1

您能否分享一下myDrawPlugin定义以了解单击事件是如何绑定和处理的？

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