javascript - jQuery 自定义插件回调 - 新问题

Question

我知道很多人都会问有关插件和回调的问题(我已经阅读了很多内容 - 这就是我到目前为止的方式)，所以请耐心等待。我尝试了一个非常简单的隐藏/显示 Accordion 类型插件来解决常见问题，并成功地让它完成我想要的事情。然而，由于我仍在学习，我不太确定有些事情是如何运作的。阅读 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

我建议使用内置的 jQuery event system为了这。您可以在任何节点上触发事件，然后 FAQ 代码的用户可以绑定(bind)到该节点上的该事件。您甚至可以将数据传递给绑定(bind)函数。

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