jquery - 如何重写 JQuery 的 .show() 和 .hide() 以触发前后事件?

标签 jquery callback overriding

我尝试重写 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”则不会。谁能告诉我我做错了什么?

最佳答案

请检查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||'',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;
});
});

关于jquery - 如何重写 JQuery 的 .show() 和 .hide() 以触发前后事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10702202/

相关文章:

css - 如何在子主题中覆盖简单的数字下载 css 文件?

javascript - Pager.js : How to lazy load bindings

javascript - 将字符串分成几部分并用 js 将每一部分包装在 html 中

callback - SSJS 在 CSJS 回调函数之前执行

lambda - Kotlin 创建一个类的实例并在一行代码中实现回调

javascript - 覆盖原型(prototype)属性或函数

javascript - 点击视频替换图片

jquery - 通过 jquery-select2 从多值选择框中获取选定的值?

windows - 为什么不调用窗口过程而不是调用 CallWindowProc?

c++ - 为什么如果没有显式范围解析,父类的父方法就无法访问?