javascript - 如何修复 jQuery multiple else if 语句不起作用

Question

我正在尝试运行此函数，但它没有到达第一个 else if 当我达到指定的屏幕尺寸时，它将继续使用第一个 if。

$(window).resize(function() {
  function removeClass() {
    $('#cookbook_add').removeClass('st-remove-label');
    $('#email_page').removeClass('st-remove-label');
  }

  function addClass() {
    $('#cookbook_add').addClass('st-remove-label');
    $('#email_page').addClass('st-remove-label');
  }

  function addRemoveLabel() {
    lastWidth = $(window).width();
    if (lastWidth < 1150) {
      console.log('1150');
      addClass();
    } else if (lastWidth < 975) {
      console.log('975');
      removeClass();
    } else if (lastWidth < 680) {
      console.log('680');
      addClass();
    } else {
      removeClass();
    }
  }
  addRemoveLabel();
});

我希望控制台日志在屏幕达到该尺寸时触发，但事实并非如此。

Answer 1

您应该为每个 if 语句指定大于和小于的范围

$(window).resize(function() {
  function removeClass() {
    $('#cookbook_add').removeClass('st-remove-label');
    $('#email_page').removeClass('st-remove-label');
  }

  function addClass() {
    $('#cookbook_add').addClass('st-remove-label');
    $('#email_page').addClass('st-remove-label');
  }

  function addRemoveLabel() {
    lastWidth = $(window).width();
    if (lastWidth < 1150 && lastWidth > 975) {
      console.log('1150');
      addClass();
    } else if (lastWidth < 975 && lastWidth > 680) {
      console.log('975');
      removeClass();
    } else if (lastWidth < 680) {
      console.log('680');
      addClass();
    } else {
      removeClass();
    }
  }
  addRemoveLabel();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

JSFiddle:https://jsfiddle.net/on0pet6g/