javascript - jQuery var 不进入函数

Question

当我按菜单切换时，我需要一个元素进行切换，然后当我按页面上的任意位置(在包装器上 元素)，我需要它再次切换。

这是我的代码:

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;
    });
}

当用户单击 #menu-toggle 元素时，包装器应切换，并且 bodyclick 变量应为 1。

现在第二个函数应该可以工作了。如果用户点击 #wrapper 上的任何位置，它应该再次切换它并将 bodyclick 更改回 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; 
    }
});

该切换适用于#menu-toggle，它甚至将bodyclick设置为1。

但是当我现在单击包装器上的任意位置时(在 #menu-toggle 上切换之后)，它不会切换元素或将 bodyclick 值更改回零。

我对此表示歉意，但我只是不明白其中的逻辑。

已修复，感谢@Nikhil Aggarwal: 只需要在 #menu-toggle 函数中添加 e.stopPropagation(); 即可。

Answer 1

将您的代码更新为以下内容

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

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