如何在JS中按条件操作类名？实现移动端导航栏禁用滚动功能

现有代码问题说明 #

• 你当前的写法存在逻辑错误：if判断写在事件绑定外部，只会在页面加载完成时执行一次，不会每次点击汉堡按钮时触发判断
• 重复给.checkbtn绑定click事件会导致点击时多次执行回调，反而出现预期外的问题
• 实际上你写的第一行$('body').toggleClass('no-scroll')已经能实现点击切换类名的效果，本身就满足「展开导航加类、收起导航删类」的需求，不需要额外写第二个事件绑定。

类名判断的实现方法 #

如果你的场景需要单独做类名判断来执行其他逻辑，可以用jQuery提供的hasClass()方法判断元素是否包含指定类，判断body是否有no-scroll类的条件写法为：
$('body').hasClass('no-scroll')
该方法返回布尔值，元素包含对应类时返回true，否则返回false。

如果你要把判断逻辑写到点击事件中，完整代码如下：

<style>
  .no-scroll {
    overflow: hidden;
  }
</style>

<script>
$('.checkbtn').on('click', function() {
  // 每次点击时判断是否有对应类
  if ($('body').hasClass('no-scroll')) {
    $('body').removeClass('no-scroll');
  } else {
    $('body').addClass('no-scroll');
  }
});
</script>

上述代码的效果和直接用toggleClass完全一致，你可以根据自己后续的扩展需求选择写法。

内容的提问来源于stack exchange，提问作者JoagCoder