如果语句不起作用，如何修复 jQuery 多个 else

Question

I am trying to run this function but it doesn't reach the first else if when I reach the specified screen size, it will continue to use the first 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();
});

I expect the console logs to fire when the screen is that size, but it doesn't.

Answer 1

You should specify a range greater than and lower than for each of the if statements

 $(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/

Answer 2

The problem is that the first if will be reached with any number < 1150... so 975 is < than 1150, 680 is < than 1150.

The best way is to compare the lowest values first like that:

        if (lastWidth < 680) {
            console.log('680');
            addClass();
        }
        else if (lastWidth < 975) {
            console.log('975');
            removeClass();
        }
        else if (lastWidth < 1150) {
            console.log('1150');
            addClass();
        }
        else {
            removeClass();
        }

Just change the order.

Answer 3

Change the function to

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

}