3

我正在尝试覆盖 JQuery 的 .show 和 .hide 方法以在使用以下代码调用它们之前和之后启动触发事件。

$(document).ready(function () {
    $('#dataBox').bind('afterShow', function () {
        alert('afterShow');
    });
    $('#dataBox').bind('afterHide', function () {
        alert('afterHide');
    });
    $('#dataBox').bind('beforeShow', function () {
        alert('beforeShow');
    });
    $('#dataBox').bind('beforeHide', function () {
        alert('beforeHide');
    });
    $('#toggleButton').click(function(){
        if($('#dataBox').is(':visible')) {
            $('#dataBox').hide ();
        } else {
            $('#dataBox').show();
        }
    });
});

jQuery(function ($) {
    var _oldShow = $.fn.show;
    //Override jquery's 'show()' method to include two triggered events before and after
    $.fn.show = function (speed, oldCallback) {
        return $(this).each(function () {
            var obj = $(this),
                newCallback = function () {
                    if ($.isFunction(oldCallback)) {
                        oldCallback.apply(obj);
                }
                obj.trigger('afterShow');
            };
        obj.trigger('beforeShow');
            _oldShow.apply(obj, [speed, newCallback]);
        });
    }
});

jQuery(function ($) {
    var _oldHide = $.fn.hide;
    //Override jquery's 'hide()' method to include two triggered events before and after
    $.fn.hide = function (speed, oldCallback) {
        return $(this).each(function () {
            var obj = $(this),
                newCallback = function () {
                    if ($.isFunction(oldCallback)) {
                        oldCallback.apply(obj);
                }
                obj.trigger('afterHide');
            };
        obj.trigger('beforeHide');
            _oldHide.apply(obj, [speed, newCallback]);
        });
    }
});

我有以下标记：

<input type='text' id='dataBox'/>
<input type='button' value='toggle' id='toggleButton' />

当我单击切换按钮时，会触发“beforeHide”和“beforeShow”事件，而“afterShow”和“afterHide”则不会。谁能告诉我我做错了什么？

4

3 回答 3

7

请检查演示小提琴。希望它有效

$.show / $.hide - 覆盖功能：

(function($){
$.override ={'show': $.fn.show, 'hide': $.fn.hide};

$.each($.override,function(M,F){

        var m=M.replace( /^\w/, function(r){ return r.toUpperCase(); });

        $.fn[M] = function(speed, easing, callback) {

            var args=[speed||0,easing||'',callback||function(){}];

            if( $.isFunction(speed)){
                args[2]=speed;
                args[0]=0;
            }                   
            else if( $.isFunction(easing)){
                args[2]=easing;
                args[1]='';
            }                   

            if(!this.selector){
                F.apply(this, arguments);
                return this;
            }

            return this.each(function () {
                var obj = $(this),
                    oldCallback = args[args.length-1],
                    newCallback = function () {
                        if ($.isFunction(oldCallback)){
                            oldCallback.apply(obj);
                        }
                        obj.trigger('after'+m);
                };

                obj.trigger('before'+m);
                args[args.length-1]=newCallback;

                //alert(args);
                F.apply(obj,args);

            });
        }
});
})(jQuery);

用法

jQuery(function($){
var $dataBox=$('#dataBox').bind('beforeHide afterHide beforeShow afterShow', function(e) {
    alert(e.type);
});

$('#toggleButton').bind('click',function(){
    $dataBox[$dataBox.is(':visible')?'hide':'show'](100,'swing',function(){ alert('end of animation');});
    return false;
});
});
于 2012-05-29T15:44:46.687 回答
3

我在你的代码中设置了一些断点，发现你的newCallback函数永远不会被调用。我认为那是因为您在调用该函数时没有使用速度参数。从 jQuery 原始函数的文档$.show中可以看到，可以$.show使用no、或 ` 三个参数调用onetwo

.show( 持续时间 [, 回调] )

持续时间一个字符串或数字，确定动画将运行多长时间。

回调动画完成后调用的函数。

添加的版本：1.4.3

.show( [duration] [,easing] [, callback] )

持续时间一个字符串或数字，确定动画将运行多长时间。

easing 一个字符串，指示用于过渡的缓动函数。

回调动画完成后调用的函数。

所以你可能会也可能不会传递一堆不同的参数。所以我认为问题出在这一行

 _oldHide.apply(obj, [speed, newCallback]);

在这种特定情况下speed未定义的位置。

你可以调用$.fn.show函数

$(..).show(undefined,callBack)
//or
$(..).show(undefined,undefined, callBack)

如果没有指定其他参数，则回调始终必须是第一个参数，在这种情况下，jQuery 将使用它的默认400ms速度/持续时间进行动画处理。你会看到一个淡入/淡出类型的效果。使用此回调使其表现得像显示/隐藏

_oldShow/_oldHide你必须打电话给

_oldShow.apply(obj, [0,newCallback]);

//or

_oldHide.apply(obj, [0,newCallback]);

在快速搜索中，我在互联网上找到了一个代码，它似乎工作正常，并且对您可以传递给的所有参数都有特殊处理$.show和$.hide. 检查下面的小提琴来看看

工作小提琴

于 2012-05-22T13:17:21.887 回答
3

为什么afterShow和afterHide事件没有被触发

newCallback如果显示/隐藏动画，jQuery 只会调用回调函数（在您的代码中）。如果没有参数传递给.show()/ .hide()（或者 if speedis undefined），那么 jQuery 将直接显示/隐藏元素，并且不会执行回调函数。

为什么覆盖.show()/.hide()不是最好的主意

  • jQuery 内部调用.show()/ .hide()（例如作为 的一部分.fadeTo()）和递归调用（在进行动画显示 / 隐藏时），因此您的自定义事件将在您可能不期望它们时触发。

  • 恕我直言，最好将“库存” jQuery 和自定义设置分开（作为插件），使用单独的方法名称/命名空间：

    • 当您的开发人员在http://api.jquery.com中查找库存方法时，他们会知道文档完整地描述了方法的行为。
    • 如果您的开发人员使用其他地方的代码，他们不会调用常规方法并期望特定于您公司代码库的行为。

.eventedShow()/.eventedHide()

这增加了.eventedShow()and （它采用与/.eventedHide()相同的参数）并且应该做你想要的：.show().hide()

(function( $ ) {

$.each( [ 'Show', 'Hide' ], function( i, method ) {
    $.fn[ 'evented' + method ] = function( speed ) {
        var originalMethod = method.toLowerCase(),
            hasCallback = false,
            args;

        // animate
        if ( speed || speed === 0 ) {
            args = $.makeArray( arguments );
            $.each( args, function( i, arg ) {
                if ( $.isFunction( arg ) ) {
                    args[ i ] = function() {
                        arg.apply( this, arguments );
                        $( this ).trigger( 'after' + method );
                    };
                    hasCallback = true;
                    return false;
                }
            } );
            if ( !hasCallback ) {
                args.push( function() {
                    $( this ).trigger( 'after' + method );
                } );
            }

            this.each( function() {
                var el = $( this );
                el.queue( function() {
                    $( this )
                        .trigger( 'before' + method )
                        .dequeue();
                } );
                $.fn[ originalMethod ].apply( el, args );
            } );

        // straight show/hide
        } else {
            this.trigger( 'before' + method );
            $.fn[ originalMethod ].apply( this, arguments );
            this.trigger( 'after' + method );
        }

        return this;
    };
} );

})( jQuery );

您可以在这里尝试代码：http: //jsfiddle.net/jefferyto/bv8D2/

您仍然需要在现有代码中更改show/hide到eventedShow/ eventedHide，但这可以通过全局搜索和替换来完成。

于 2012-05-31T11:22:05.907 回答