事件内部的jQuery HeapBox "this“

Question

我选择了一个名为HeapBox的插件，以便为一些select下拉菜单设置样式。

这个插件没有添加任何关于盒子状态的信息(打开或关闭)，但是它有一些事件，比如openStart和closeCompleted。

我的执行情况如下：

$( 'select' ).heapbox( {
   'openStart' : function( ) { $( this ).addClass( 'open' ); },
   'closeComplete' : function( ) { $( this ).removeClass( 'open' ); }
} );

然而，this是未定义的。我试图理解为什么this不引用自定义select元素的对象实例。这似乎是一个标准的样板，但似乎事件没有引用相关的heapBox。

以前有没有其他人使用过这个插件，有没有办法完成我想做的事情，而不修改他们的源代码呢？

Answer 1

如果不想接触供应商代码，可以使用fn.bind创建处理程序函数的绑定版本。请注意，您需要使用$.fn.each来迭代您的select：

function openHandler(){
    $(this).addClass('open');
}
function closeHandler(){
    $(this).removeClass('open')
}

$('select').each(function(){
    $(this).heapbox({
       'openStart' : openHandler.bind(this),
       'closeComplete' : closeHandler.bind(this)
    });
});

Answer 2

查看一下堆盒插件的src，它使用没有任何参数的call()来调用这些函数。例如：

this.options.openStart.call();

如果希望this引用select元素，则需要对其进行修改以读取：

this.options.openStart.call(this.element);

您可以自己修改插件，并对创建者进行这些更改或请求它们。