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

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

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

Answer 2

如果回调将在某个相关元素的上下文中执行，那可能会很好。

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

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

2 个答案: