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