如何更正此 jquery 代码的输出？

Question

此代码应打印：

如果屏幕宽度 < 740 或为 740。
如果屏幕宽度>740且屏幕宽度<1065
如果屏幕宽度 >1065 或者是 1065
如果屏幕宽度 >1389 或者是 1389

但是当第4个条件为真时，它总是随机显示2或3。
这里有什么问题？看看控制台。

var screenWidth = $(window).width();

if(screenWidth < 740 || screenWidth == 740) {
  console.log("1");
} else if(screenWidth > 740 && screenWidth < 1065){
  console.log("2");
} else if(screenWidth > 1065 || screenWidth == 1065) {
  console.log("3");
} else if (screenWidth > 1389 || screenWidth == 1389) {
  console.log("4");
}

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

Answer 1

一旦 else if 的一个分支为真，则执行将结束，而不是检查另一个分支是否也为真。按照您的逻辑，如果您的 screenWidth 为 1400，则 screenWidth > 1065 || screenWidth == 1065 为真，因此您不会达到 screenWidth > 1389 || screenWidth == 1389 检查。

您可以将代码修改为：

var screenWidth = $(window).width();

if (screenWidth <= 740) {
  console.log("1");
} else if(screenWidth > 740 && screenWidth < 1065){
  console.log("2");
} else if(screenWidth >= 1065 && screenWidth < 1389) {
  console.log("3");
} else if (screenWidth >= 1389) {
  console.log("4");
}

Answer 2

或者你也可以

var i,warr=[0,740,1065,1389],
    w=screen.width;
for (i=0;warr[i]<=w;i++){}
console.log(i);

@Barmar：感谢您的提示回复：screen.width！

Answer 3

正确设置的条件如下所示。

考虑 @media 规则，除非你真的需要 JS 中的输入/jQuery。

var screenWidth = $(window).width();
console.log(screenWidth);

if(screenWidth <= 740) {
  console.log("1");
} else if(screenWidth > 740 && screenWidth <= 1065){
  console.log("2");
} else if(screenWidth > 1065 && screenWidth <= 1389) {
  console.log("3");
} else if (screenWidth > 1389) {
  console.log("4");
}

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

此外，您应该查找 common breakpoints。

如何更正此 jquery 代码的输出？

How to correct the output of this jquery code?

jquery

if-statement

viewport