jQuery var没有进入函数答案

【问题标题】：jQuery var not entering functionjQuery var没有进入函数
【发布时间】：2018-05-10 11:59:43
【问题描述】：

当我按下 menu-toggle 时，我需要一个元素来切换，然后当我按下页面上的任意位置（在 wrapper em> 元素），我需要它再次切换。

这是我的代码：

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 var 应该为 1。

现在第二个功能应该可以工作了。如果用户在 #wrapper 上单击 ANYWHERE，它应该再次切换它并将 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();即可。

【问题讨论】：

在事件处理程序中移动if (bodyclick === 1)
jQuery 不代理它的变量和函数。 bodyclick 变量仅在 DOM 执行完成时可用。

标签： javascript jquery

【解决方案1】：

将您的代码更新为以下

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

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

【讨论】：

我明白你在说什么，我已经解决了。但我仍然没有得到我想要的结果。 #menu-toggle 工作正常，但 #wrapper if 不起作用。我已经用你的回答更新了我的结果。
@IkePr - 在您的编辑中，您在此行中添加了一个额外的变量var bodyclick = 1;，这会导致问题。应该是简单的bodyclick = 1;
不幸的是，这并不能解决问题。如果有帮助，这是整个代码：jsfiddle.net/prozik/n12o3vhz/3
@IkePr - 你的小提琴没有正确加载。这是一个工作版本 - jsfiddle.net/3hy7Lwk2
@IkePr - 这是您示例的固定版本 - jsfiddle.net/n12o3vhz/4。您需要在 $("#menu-toggle").click 函数中添加 e.stopPropagation();。由于包装器是它的父级，所以点击事件冒泡并且两个点击事件同时触发，这意味着一旦将 bodyclick 设置为 1，它也因此设置为 0。

【解决方案2】：

你应该这样重构你的代码，因为你之前的代码只触发一次，并且不监听点击事件：

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

【讨论】：