jQueryカスタムプラグインコールバック - 新しい質問

Question

多くの人がプラグインとコールバックに関する質問をしていることを知っています。私は非常に単純なhide/showアコーディオンタイプのプラグインで自分の手を試してみました。しかし、私がまだ学んでいるように、私はいくつかのことがうまくいくかどうかは分かりません。 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を使用することをお勧めします。 :)