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

时间:2019-01-17 12:17:15

标签: javascript jquery

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

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

我希望当屏幕达到该大小时,控制台日志会触发,但事实并非如此。

3 个答案:

答案 0 :(得分:2)

您应该为每个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/

答案 1 :(得分:0)

将功能更改为

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

}

答案 2 :(得分:0)

问题在于,第一个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();
        }

只需更改顺序。