在jQuery中创建和调用函数

Question

I'm new with jquery and I'm having problems in constructing functions. I need some help on this one? I'm not sure I've done the correct thing with this functions?

Please explain what is rong in how I wrote the next functions or tell me how to build the correct syntax The function member.panel.init('login') doesn't do the right thing.

member = {};
member.panel = function(){
    return{
    init: function(a)
    {   
        $('#log_in .login').click(open_menu(a));
        $('#log_in .register').click(open_menu(a));
    },

    open_menu: function(what)
    {
         if(what!='login' || what!='register') what='login';
         $('#q_login_dialog #menu-'+what+'').addClass("q_dialog_panel_item_active");
         if(what=='login')
         {
            $('.q_dialog_content #dialog-form3').css("display", "none");
            $('.q_dialog_content #dialog-form2').css("padding-bottom", "20px");
            $(".login-box").fadeIn('fast'); 
         }
         if(what=='register')
         {
            $('.q_dialog_content #dialog-form2').css('display', '');
            $('.q_dialog_content #dialog-form3').css("padding-bottom", "20px");
            $(".login-box").fadeIn('fast'); 
         }   
    }
}
}();
$(function () {
   member.panel.init('login');
});

Answer 1

When you do this:

open_menu(a)

...you're calling that function. For a handler, you want to pass a function to click() . The way you're doing it, it looks like you want to retain the value that is passed to init . This would mean that you need to have your open_menu function return a function that references that value.

Unfortunately, you don't show a function named open_menu that is accessible that way. Your open_menu function is the member of an object, so that's how you need to access it.

Your code should look like this:

member = {};
member.panel = function () {
    return {
        init: function (a) { // use "this.open_menu" to refer to the function
            $('#log_in .' + a).click(this.open_menu(a));
        },
        open_menu: function (what) {

            // "open_menu" now returns a handler function that references "login"
            return function () {
                if (what != 'login' || what != 'register') what = 'login';
                $('#q_login_dialog #menu-' + what + '').addClass("q_dialog_panel_item_active");
                if (what == 'login') {
                    $('.q_dialog_content #dialog-form3').css("display", "none");
                    $('.q_dialog_content #dialog-form2').css("padding-bottom", "20px");
                    $(".login-box").fadeIn('fast');
                }
                if (what == 'register') {
                    $('.q_dialog_content #dialog-form2').css('display', '');
                    $('.q_dialog_content #dialog-form3').css("padding-bottom", "20px");
                    $(".login-box").fadeIn('fast');
                }
            };
        }
    }
}();
$(function () {
    member.panel.init('login');
    member.panel.init('register');
});

Or here's an alternative that is closer to Rob W's comment, but fixes the open_menu function reference.

member = {};
member.panel = function () {
    return {
        init: function (a) {
            var self = this;
            $('#log_in .' + a).click(function() {
                self.open_menu(a); 
            });
        },

        open_menu: function (what) {
            if (what != 'login' || what != 'register') what = 'login';
            $('#q_login_dialog #menu-' + what + '').addClass("q_dialog_panel_item_active");
            if (what == 'login') {
                $('.q_dialog_content #dialog-form3').css("display", "none");
                $('.q_dialog_content #dialog-form2').css("padding-bottom", "20px");
                $(".login-box").fadeIn('fast');
            }
            if (what == 'register') {
                $('.q_dialog_content #dialog-form2').css('display', '');
                $('.q_dialog_content #dialog-form3').css("padding-bottom", "20px");
                $(".login-box").fadeIn('fast');
            }
        }
    }
}();
$(function () {
    member.panel.init('login');
    member.panel.init('register');
});

Answer 2

Rob W is right

Just for explanation: The first parameter for .click() is supposed to be a function reference. In your code the first parameter is the result of the immediate call(!) to the function open_menu() with parameter a. Only if the result (the return value) of this call were a function reference this would result in a valid .click() parameter.

If you move your code into an anonymous function() like Rob W proposed, it will result in a function reference (to this anonymous function) which will only be executed when the click event is fired.