如何覆盖JQuery的.show（）和.hide（）触发事件之前和之后？ [英] How can I override JQuery's .show() and .hide() to trigger events before and after?

问题描述

 
我尝试使用JQuery的.show和.hide方法来启动触发器事件， code> $（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'）。 $（'＃dataBox'）。is（'：visible'））{
 $（'＃dataBox'）。hide（）; 
} else {
 $（' ）.show（）; 
} 
}）; 
}）; 
 
 jQuery（function（$）{
 var _oldShow = $ .fn.show; 
 //覆盖jQuery的'show（）'方法， 
 $ .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; 
 //覆盖jquery的hide 
 $ .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'不是。任何人都可以告诉我我做错了什么？

解决方案

检查 demo fiddle 。希望工作

$。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 || '$'; 
 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; 
}）; 
}）; 
  

I am tryign to override the JQuery's .show and .hide methods to launch trigger events before and after they are called with the following code.

$(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]);
        });
    }
});

I have the following Markup:

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

When I click the toggle button the 'beforeHide' and 'beforeShow' events are triggering while the 'afterShow' and 'afterHide' aren't. Can anyone clue me in as to what I am doing wrong?

解决方案

plz check the demo fiddle . hope it works

$.show / $.hide - override function:

(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);

usage

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;
});
});

这篇关于如何覆盖JQuery的.show（）和.hide（）触发事件之前和之后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！