jQuery HeapBox «this» внутри событий

Question

Я выбрал плагин под названием HeapBox, чтобы создать несколько выпадающих меню select.

Этот плагин не добавляет никакой информации о состоянии коробки (открытой или закрытой), но в ней есть события, такие как openStart и closeCompleted.

Моя реализация выглядит следующим образом:

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

Однако this не определено. Я пытаюсь понять, почему this не ссылается на экземпляр объекта для пользовательского элемента select. Похоже, что это стандартный шаблон, но похоже, что в событиях нет ссылки на связанный с ним кусок.

Кто-нибудь еще использовал этот плагин раньше, и есть ли способ выполнить то, что я пытаюсь сделать, не изменяя их исходный код?

Answer 1

Если вы посмотрите на src для плагина heapbox, он использует call() без каких-либо параметров для вызова этих функций. Например:

this.options.openStart.call();

Если вы хотите this сослаться выбора элемента, он должен был бы быть изменен следующим образом:

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

Вы можете модифицировать плагин самостоятельно и сделать эти изменения или запросить их у создателя

Answer 2

Если вы не хотите прикасаться к коду поставщика, вы можете использовать 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) 
    }); 
});