Javascript jQuery变量未进入函数

当我按下菜单切换时，我需要一个元素来切换，然后当我按下页面上的任何位置（在包装元素上）时，我需要它再次切换

这是我的代码：

var bodyclick = 0;
console.log(bodyclick);

//If you clicks the menu toggle, then activate toggle and bodyclick should be 1
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
    bodyclick = 1;
    console.log(bodyclick);
});

//Now, that the bodyclick is 1, user should click anywhere on the wrapper to activate the toggle again
if (bodyclick === 1) {
    console.log("The wrapper is toggled");
    $("#wrapper").click(function(e) {
        //e.preventDefault();
        $("#wrapper").toggleClass("toggled");
        bodyclick = 0;
    });
}

当用户单击#菜单切换元素时，包装器应切换，bodyclick变量应为1

现在第二个函数应该可以工作了。如果用户单击包装器上的任意位置，则应再次切换包装器，并将bodyclick back更改为0

出于某种原因，这不起作用。它不会启动if语句。控制台日志显示bodyclick为1，但if不工作

我尝试使用==但它没有改变任何东西。为什么if不起作用

编辑 添加@Nikhil Aggarwal后，回答：

var bodyclick = 0;
console.log(bodyclick);


$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
    bodyclick = 1;
    console.log(bodyclick);
});

$("#wrapper").click(function(e) {
    if (bodyclick === 1) {
        console.log("The wrapper is toggled");
       //e.preventDefault();
       $("#wrapper").toggleClass("toggled");
       bodyclick = 0; 
    }
});

切换在#菜单切换上工作，它甚至将bodyclick设置为1

但是当我现在单击包装器上的任意位置时（在切换到#菜单切换之后），它不会切换元素或将bodyclick值更改回零

对此我深表歉意，但我不明白其中的逻辑

修复了，感谢@Nikhil Aggarwal：

---

只需添加

e.stopPropagation（）在#菜单切换功能中。
将代码更新为以下内容

$("#wrapper").click(function(e) {
    if (bodyclick === 1) {
        console.log("The wrapper is toggled");
       //e.preventDefault();
       $("#wrapper").toggleClass("toggled");
       bodyclick = 0; 
    }
});

原因-加载时，
bodyclick
的值为0，因此从未执行if条件，这也意味着从未发生绑定。因此，您应该将条件移动到事件处理程序中，以便事件处理程序在加载时存在，并根据需要有条件地执行。
将代码更新为以下内容

$("#wrapper").click(function(e) {
    if (bodyclick === 1) {
        console.log("The wrapper is toggled");
       //e.preventDefault();
       $("#wrapper").toggleClass("toggled");
       bodyclick = 0; 
    }
});

原因-加载时，
bodyclick
的值为0，因此从未执行if条件，这也意味着从未发生绑定。因此，您应该将条件移动到事件处理程序中，以便事件处理程序在加载时存在，并根据需要有条件地执行。
您应该以这种方式重构代码，因为以前的代码只触发一次，而不侦听click event：

$("#wrapper").click(function(e) {
   e.preventDefault();
   if (bodyclick === 1) {
       $("#wrapper").toggleClass("toggled");
       bodyclick = 0; 
   }
});

您应该以这种方式重构代码，因为以前的代码只触发一次，并且不侦听click事件：

$("#wrapper").click(function(e) {
   e.preventDefault();
   if (bodyclick === 1) {
       $("#wrapper").toggleClass("toggled");
       bodyclick = 0; 
   }
});

如果（bodyclick==1）

在事件句柄内，jQuery不代理其变量和函数，则移动

。bodyclick变量仅在DOM执行完成时可用。如果（bodyclick==1）

在事件句柄内，则移动

jQuery不代理其变量和函数。bodyclick变量仅在DOM执行完成时可用。我理解您的意思，并已修复。但我仍然没有得到我想要的结果。#菜单切换可以正常工作，但是#包装器如果不起作用。我已经用您的答案更新了我的结果。@IkePr-在您的编辑中，您在这一行添加了一个额外的变量
var bodyclick=1导致问题的原因。它应该是
bodyclick=1e.stopPropagation（）$（“#菜单切换”）中选择code>。单击
功能。由于包装器是此事件的父项，因此单击事件冒泡，两个单击事件同时触发，这意味着一旦bodyclick设置为1，它也会因此设置为0。我理解您的意思，并且我已修复了此问题。但我仍然没有得到我想要的结果。#菜单切换可以正常工作，但是#包装器如果不起作用。我已经用您的答案更新了我的结果。@IkePr-在您的编辑中，您在这一行添加了一个额外的变量
var bodyclick=1导致问题的原因。它应该是
bodyclick=1e.stopPropagation（）$（“#菜单切换”）中选择code>。单击
功能。由于包装器是该事件的父级，因此单击事件冒泡，两个单击事件同时触发，这意味着一旦bodyclick设置为1，它也会因此设置为0。