CODEWITHSUNDEEP
javascriptjqueryobjectvar
Kirill Monocle
Kirill Monocle

Reputation: 77

Change variable based on which element is clicked

It is possible to change variable inside function which is based on element is user clicks? In my case this will fully work for one kind of menu but I need two fully identical menu with one difference - second click handler must load toggleDrawer with changed $sidebar to $navbar variable.

    /*
    Variables
    */

    var $sidebar = $('#sidebar'),  
        $navbar = $('#navbar'),
        drawerOpen = false,

    /*
    Functions
    */

    closeDrawer = function() {
        drawerOpen = false;
        $body.css('overflow','').removeClass('sidebar-open');
        $sidebar.removeClass('open');
        $sidebar.animate({'right':'-50%'},{duration:300});
        $(this).hide();

    },

    openDrawer = function() {
        drawerOpen = true;
        $body.addClass('sidebar-open').css('overflow','hidden');
        $sidebar.addClass('open');
        $sidebar.animate({'right':'0%'},{duration:300});                
    },

    toggleDrawer = function() {
        if (drawerOpen) {
            closeDrawer();
        }else{
            openDrawer();
        }
    },

    /*
    Bind Events
    */

    $document.on('click', '.drawer-toggle-sidebar', function(event){
        toggleDrawer();
        event.preventDefault();
    });

    $document.on('click', '.drawer-toggle-navbar', function(event){
        toggleDrawer();
        event.preventDefault();
    });

Upvotes: 0

Views: 105

Answers (1)

jjsquared
jjsquared

Reputation: 299

To elaborate on the above comment, and show an example:

Here are your functions with passing in the element you wish to open/close:

/*
    Functions
    */

    closeDrawer = function(drawer) {
        drawerOpen = false;
        $body.css('overflow','').removeClass('sidebar-open');
        drawer.removeClass('open');
        drawer.animate({'right':'-50%'},{duration:300});
        $(this).hide();

    },

    openDrawer = function(drawer) {
        drawerOpen = true;
        $body.addClass('sidebar-open').css('overflow','hidden');
        drawer.addClass('open');
        drawer.animate({'right':'0%'},{duration:300});                
    },

    toggleDrawer = function(drawer) {
        if (drawerOpen) {
            closeDrawer(drawer);
        }else{
            openDrawer(drawer);
        }
    },

And your bind events:

/*
    Bind Events
    */

    $document.on('click', '.drawer-toggle-sidebar', function(event){
        toggleDrawer(event.currentTarget);
        event.preventDefault();
    });

    $document.on('click', '.drawer-toggle-navbar', function(event){
        toggleDrawer(event.currentTarget);
        event.preventDefault();
    });

You could even combine the two on click events into one and just pass in the currentTarget.

I hope this helps.

Upvotes: 1

Related Questions