JQuery函数在重构后无法正常工作

我对JQuery（更多C#）是新手，看不出我在这里做错了什么

我有下面的JQuery，它可以切换汉堡菜单，还可以使菜单变暗，并防止滚动到正文。汉堡包还可以从3条水平线到X设置动画。在第一个JQuery（如下）中，这很好。然而，我一直在尝试改进这个，并将我的代码清理到下面的第二个JQuery，它看起来更干净（记住未来的函数）。然而，当我这样做的时候，除了汉堡不再动画化为X之外，所有的东西都仍然像预期的那样工作。我真的不明白为什么在我的JQuery新手眼中没有真正明显的区别

作为一名新手，我也想知道这样的函数是否需要以下两行代码：

e.preventDefault();

event.stopPropagation();

JQuery（作品）：

JQuery（不工作）：

---

在原始代码中，

this

的值指的是

#toggle nav

元素。在修订版中，

此

引用其父函数。

您有几个问题。您在click事件中定义函数并直接调用它。因此，

此

变量的作用域不正确，无法满足您的需要。这也意味着每次单击

#toggle nav

时，函数都会被创建、调用，然后被销毁。如果您在click事件之外声明它，它只创建一次，每次单击都将重新使用它。您还使用了

event.stopPropagation（）

，而您使用的参数名是

e

。最后，您不需要将匿名函数传递到

。单击
函数。您可以按名称传递命名函数，它将被直接调用

jQuery(document).ready(function () {
    jQuery('#toggle-nav').click(function (e) {
        jQuery(this).toggleClass('active');
        jQuery('.menu ul').toggleClass('active');
        jQuery('.hamburger ul').toggleClass('active');
        jQuery('.dimmer').toggleClass('active');
        jQuery('body').toggleClass('no-scrolling'); //Alternatively : jQuery(document.body)

        return false;
    });
});

下面是您的代码，经过一些清理，可以解决这些问题

jQuery(document).ready(function () {
    jQuery('#toggle-nav').click(toggleNav);

    function toggleNav(e) {
        e.stopPropagation();
        jQuery(this).toggleClass('active');
        jQuery('.menu ul').toggleClass('active');
        jQuery('.hamburger ul').toggleClass('active');
        jQuery('.dimmer').toggleClass('active');
        jQuery('body').toggleClass('no-scrolling');

        e.preventDefault();
    }
});

或者，您可以只使用匿名函数

jQuery(document).ready(function () {
    jQuery('#toggle-nav').click(function (e) {
        jQuery(this).toggleClass('active');
        jQuery('.menu ul').toggleClass('active');
        jQuery('.hamburger ul').toggleClass('active');
        jQuery('.dimmer').toggleClass('active');
        jQuery('body').toggleClass('no-scrolling'); //Alternatively : jQuery(document.body)

        return false;
    });
});

关于
事件
和
e
的使用，请参阅。本质上，对于某些浏览器，
事件
属性存在于全局上下文中。这意味着您的代码可能在这些浏览器中运行，但在其他浏览器中会中断。单击“事件”会自动将事件作为第一个参数传递给提供的函数，以便您可以直接跨浏览器访问该函数

最后，当使用jqueryevents
时，返回false同时触发
e.stopPropagation（）和
e.preventDefault（）因此，如果返回false，您不需要自己调用它们

您需要将函数移出事件侦听器

jQuery(document).ready(function() {
  jQuery('#toggle-nav').click(function(e) {
    e.stopPropagation();
    toggleNav();
    e.preventDefault();
  });
});

function toggleNav() {
  jQuery('#toggle-nav').toggleClass('active');
  jQuery('.menu ul').toggleClass('active');
  jQuery('.hamburger ul').toggleClass('active');
  jQuery('.dimmer').toggleClass('active');
  jQuery('body').toggleClass('no-scrolling');
}

我还向函数中添加了正确的选择器，因为
会发生变化。如果需要，您可以传入事件目标（
e.target
也许，我一时想不起来）。为了回答你的最后一个问题，我怀疑你不知道这两行代码，但是如果没有查看所有代码，我无法确定。
你不应该使用
event.stopPropagation（）
它应该是
e.stopPropagation（）
。此外，将代码移动到事件处理程序本身定义的新函数似乎有点愚蠢，因为每次单击时该函数都会被重新定义…谢谢你的回答，我没有意识到这就是我正在做的。这绝对是太棒了，帮助我了解了发生的事情。这也让我意识到我对JQuery的了解是多么少，它与c#（这是我的日常工作，但还有很长的路要走）有多么不同！你所做的和我尝试做的是正确的吗？也就是说，最好单独创建一个函数并调用它，而不是在单击事件中定义函数？很高兴我能提供帮助：）通常，如果你只使用一次函数，我不认为只使用匿名函数会有伤害。我编辑了我的答案，加入了一个例子。谢谢你的回答，再次指出了一些我没有意识到的事情。谢谢你的回答。我将接受玛丽亚的回答，但我只是想说声谢谢，因为到目前为止所有的回答都让我意识到了一些新的东西。
jQuery(document).ready(function() {
  jQuery('#toggle-nav').click(function(e) {
    e.stopPropagation();
    toggleNav();
    e.preventDefault();
  });
});

function toggleNav() {
  jQuery('#toggle-nav').toggleClass('active');
  jQuery('.menu ul').toggleClass('active');
  jQuery('.hamburger ul').toggleClass('active');
  jQuery('.dimmer').toggleClass('active');
  jQuery('body').toggleClass('no-scrolling');
}