jQuery functions inside click events

Question

The following works fine:

    classes_tab.click(function(evt){
        evt.preventDefault();
        h_c.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            classes_tab.addClass('active');
            classes.fadeIn(fast);
        });
    });

    contacts_tab.click(function(evt){
        evt.preventDefault(evt);
        h_cl.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            contacts_tab.addClass('active');
            contacts.fadeIn(fast);
        });
    });

    home_tab.click(function(evt){
        evt.preventDefault();
        c_cl.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            home_tab.addClass('active');
            home.fadeIn(fast);
        });
    });

Is there a way of writing a function before this click events without repeating every time what is happening inside the click event?

Say I have something like:

function tabs(x, y){
    x.fadeOut(fast);
            y.fadesIn(fast);
        }

than inside each click event I just call this function by changing parameters

Answer 1

yes.. u can do that.. here is the example...

Click function (home_tab for this example)..

...click(function(event){
     evt.preventDefault();
    functionName('c_cl','home_tab','home');
});

Function

function functionName(x,y,z)
{
        var x = $(#x)|| var y = $(#y)|| var z=$(#z) //add your selector here(this is just and examplr) 
        x.filter(':visible').fadeOut(fast, function(){
        disactive.removeClass('active');
        y.addClass('active');
        z.fadeIn(fast);
    });  
}

like wise u can call the click function for two others.. with the parameters..

Answer 2

Create a new Function

function myFunc(evt, active_tab, container){
        evt.preventDefault(evt);
        h_cl.filter(':visible').fadeOut(fast, function(){
            disactive.removeClass('active');
            active_tab.addClass('active');
            container.fadeIn(fast);
        });
}

Bind the new function to the click event of an element

home_tab.click(function(evt){
      myFunc(evt,home_tab, home);
    });
});

classes_tab.click(function(evt){
      myFunc(evt,classes_tab, classes);
    });
});

contacts_tab.click(function(evt){
      myFunc(evt,contacts_tab, contacts);
    });
});

Answer 3

You can pass data to your handlers:

function tabsHandler(evt){
    evt.preventDefault();
    evt.data.x.fadeOut(fast);
    evt.data.y.fadesIn(fast);
}
$('.home_tab').on('click', {x : $foo, y : $bar}, tabsHandler);
// where $foo and $bar are references to jQuery objects

Or you can do:

function tabsHandler(x, y){
    x.fadeOut(fast);
    y.fadesIn(fast);
}
$('.home_tab').on('click', function(evt){
    evt.preventDefault();
    tabsHandler($foo, $bar);
});

Or you could store references to other objects in data first and then use them in handlers. Try something like this:

// Your class names are my assumption
var $home_tab = $('.home_tab');
var $classes_tab = $('.classes_tab');
// I'm also assuming c_cl, h_c, disactive and home are existing jQuery objects
$home_tab.data({
    'cl' : c_cl,
    'disactive' : disactive,
    'objectToFadeIn': home
});

$classes_tab.data({
    'cl' : h_c,
    'disactive' : disactive,
    'objectToFadeIn': classes
});

function tabsHandler(evt){
    evt.preventDefault();
    var $tab = $(this);
    $tab.data('cl').filter(':visible').fadeOut(fast, function(){
        $tab.data('disactive').removeClass('active');
        $tab.addClass('active');
        $tab.data('objectToFadeIn').fadeIn(fast);
    });
}

$home_tab.click(tabsHandler);
$classes_tab.click(tabsHandler);

Or for the last bit:

$(document).on('click', '.home_tab, .classes_tab', tabsHandler);