Question

此代码应打印：

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

但是当第四个条件为true时，它总是随机显示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

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

除非您确实需要JS / jQuery中的输入，否则请考虑@media规则。

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。

Answer 2

一旦else if的一个分支为true，则执行将结束，而不是检查另一个分支是否也为true。按照您的逻辑，如果您的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 3

或者您可以

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

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

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

3 个答案: