根据单击的元素更改变量

Change variable based on which element is clicked

本文关键字：改变变量元素单击更新时间：2023-09-26

是否可以更改基于元素的函数内部的变量？在我的情况下，这将完全适用于一种菜单，但我需要两种完全相同的菜单有一点不同——第二次点击处理程序必须加载toggleDrawer，并将$sidebar变量更改为$navbar变量。

    /*
    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();
    });

详细说明上述注释，并显示一个示例：

以下是您传递要打开/关闭的元素的函数：

/*
    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);
        }
    },

以及您的绑定事件：

/*
    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();
    });

您甚至可以将这两个点击事件合并为一个事件，然后传入currentTarget。

我希望这能有所帮助。