jQuery自定義插件回調 - 新問題

Question

我知道很多人問關於插件和回調的問題（而且我已經閱讀了很多 - 這就是我如何得到這個）所以請耐心等待。我試着用一個非常簡單的隱藏/顯示手風琴類型插件來獲取常見問題解答，並且成功地實現了我想要的功能。然而，正如我仍在學習，我不確定某些事情是如何工作的。 在閱讀this question和其他一些內容後，我可以添加一個回調插件。
我的問題是：這段代碼是否正確，是否有更好的方法來實現此回調？ 這是working sample和下面的代碼。 謝謝你的時間。

(function($) { 
$.fn.simpleFAQ = function(options, callback) { 
    // define default options 
    var defaults = { 
     textExpand  : "Expand all", 
     textCollapse : "Collapse all", 
     displayAll  : false, 
     toggleSpeed  : 250 
    }; 
    var options = $.extend(defaults, options); 
    // callback 
    if(typeof callback != "function") { callback = function(){} } 

    this.each(function() { 
     obj = $(this); 
     // insert FAQ expand all/collapes all text before FAQ 
     var txt = '<span class="simple_jfaqText"><a href="javascript:;" rel="jfaq_expand">' + options.textExpand + '</a>/<a href="javascript:;" rel="jfaq_collapse">' + options.textCollapse + '</a></span>'; 
     $(txt).insertBefore(obj); 

     // add class to desired FAQ element 
     obj.addClass('simple_jfaq'); 

     // show/hide faq answers according to displayAll option 
     (options.displayAll == false) ? ddDisplay = 'none' : ddDisplay = 'block'; 
     obj.children('dd').css('display', ddDisplay); 


     // add classes according to <dd> state (hidden/visible) 
     obj.children('dd:visible').prev('dt').addClass('expanded'); 
     obj.children('dd:hidden').prev('dt').addClass('collapsed'); 

     obj.children('dt') 
      .click(function() { 
       // show/hide all answers (dd elements) on click 
       $(this).nextUntil('dt').slideToggle(options.toggleSpeed, callback); 
       // dt class change on click 
       $(this).toggleClass('collapsed').toggleClass('expanded'); }) 
      .hover(function() { $(this).toggleClass('hover'); }, function(){ $(this).toggleClass('hover'); }); 
    }); 

    // Expand All 
    obj.prev('span').children('a[rel=jfaq_expand]').click(function() { 
     // show all answers 
     $(this).parent('span').next('.simple_jfaq').children('dd:hidden').slideToggle(options.toggleSpeed); 
     setTimeout(callback, options.toggleSpeed) 
     // change classes 
     $(this).parent('span').next('.simple_jfaq').children('dt').removeClass('collapsed').addClass('expanded'); 
    }); 

    // Collapse all 
    obj.prev('span').children('a[rel=jfaq_collapse]').click(function() { 
     // hide all answers 
     $(this).parent('span').next('.simple_jfaq').children('dd:visible').slideToggle(options.toggleSpeed); 
     setTimeout(callback, options.toggleSpeed); 
     // change classes 
     $(this).parent('span').next('.simple_jfaq').children('dt').removeClass('expanded').addClass('collapsed'); 
    }); 
}; 
})(jQuery); 

Answer 1

如果回調會在某些相關元素的上下文中執行，那可能會很好。

var clicked = this; 
setTimeout(function() { callback.call(clicked); }, options.toggleSpeed); 

Answer 2

我建議使用jQuery的內置event system爲此。您可以在任何節點上觸發事件，然後FAQ代碼的用戶可以綁定到該節點上的該事件。你甚至可以將數據傳遞給綁定函數。

當然，我真正的建議是使用同名的my plug-in。 :)