Question

var contactForm =
    {
        form: $('.contact'),
        button: $('button'),
        config: {
            type: 'slideDown',
        },

        init: function (config)
        {
            $.extend(this.config, config);

            contactForm.button.on('click', function() 
            {
                if(contactForm.form.is(':hidden'))
                    this.showForm();
                else
                    this.closeForm();
            });
        },

        showForm: function ()
        {
            contactForm.form[contactForm.config.type](2000);
        },

        closeForm: function ()
        {
            contactForm.form.slideUp(2000);
        },
    };

    contactForm.init();

In init() function, I tried to call showForm() and closeForm() methods by using ‘this’. However, ‘this’ is appointed to the click element. (the button)

How can I prevent this?

I always want ‘this’ to contain struct/class object. If I want a button object be appointed, I want it to be appointed into $(this), not this.

Answer 1

Use:

init: function (config)
{
    var self = this;
    $.extend(this.config, config);

    self.button.on('click', function() 
    {
        if(contactForm.form.is(':hidden'))
            self.showForm();
        else
            self.closeForm();
    });
},