Question

我正在尝试运行此功能，但是如果达到指定的屏幕尺寸，它将无法使用其他功能。

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

Answer 2

将功能更改为

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

}

Answer 3

问题在于，第一个if将会以任何<1150 ...的数字到达，因此975小于1150，680小于1150。

最好的方法是先比较最低的值：

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

只需更改顺序。

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

3 个答案: