jQuery HeapBox「this」內部事件

我選擇了一個名爲HeapBox的插件，以便設計一些select下拉菜單。jQuery HeapBox「this」內部事件

此插件不會添加關於框狀態（打開或關閉）的任何信息，但它確實有事件，如openStart和closeCompleted。

我實現如下：

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

然而，this是不確定的。我試圖瞭解爲什麼this沒有引用自定義選擇元素的對象實例。它似乎是一個標準的樣板，但它看起來事件沒有對相關heapBox的引用。

有沒有其他人使用過這個插件之前，有沒有辦法完成我想要做的事情，而無需修改他們的源代碼？

來源

2013-12-19 Quantastical

@ M90好主意，但並沒有什麼綁定到這裏... – zeroflagL

看看heapbox插件的src，它使用不帶任何參數的call（）來調用這些函數。例如：

this.options.openStart.call();

如果你想this指選擇元素，那就需要修改如下：

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

您可以修改插件自己，做出這些改變或請求他們的創作者

來源

2013-12-19 19:46:33 zincorp

感謝這正是我之後。我試圖避免修改源代碼，但有時這是不可避免的。聽起來我也應該向作者提出建議。感謝您的意見。 – Quantastical

另外，如果有人使用這個插件，我將'this'傳遞給調用，而不是'this.element'（它引用原始select元素，而不是heapBox元素）。然後，在事件中，我可以使用'$（'#heapbox_'+ this.instance.heapId）'，類似於插件源的方式。 – Quantastical

如果您不想觸摸供應商代碼，您可以使用fn.bind創建處理器樂趣的綁定版本ction。請注意，您將需要使用$.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) 
    }); 
});

來源

2013-12-20 08:59:15 m90

jQuery HeapBox「this」內部事件

回答

相關問題