首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何纠正这段jquery代码的输出?

如何纠正这段jquery代码的输出?
EN

Stack Overflow用户
提问于 2018-07-26 04:50:40
回答 3查看 36关注 0票数 0

下面的代码应该打印出来:

如果屏幕宽度< 740或为740,则为

  1. 。如果屏幕宽度为>740且屏幕宽度为<1065,则为
  2. 如果屏幕宽度为>1065或为1065,则为
  3. 如果屏幕宽度为>1389或为1389,则为

但当第四个条件为真时,它总是随机显示2或3。

这里有什么问题?看一看控制台。

https://codepen.io/code_alex/pen/xJLwpq

代码语言:javascript
复制
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");
}
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-07-26 05:05:15

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

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

代码语言:javascript
复制
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");
}
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

此外,您应该查找common breakpoints

票数 1
EN

Stack Overflow用户

发布于 2018-07-26 04:58:09

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

您可以将代码修改为:

代码语言:javascript
复制
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");
}
票数 0
EN

Stack Overflow用户

发布于 2018-07-26 05:03:26

或者你可以这样做

代码语言:javascript
复制
var i,warr=[0,740,1065,1389],
    w=screen.width;
for (i=0;warr[i]<=w;i++){}
console.log(i);

@Barmar:谢谢你的提示re:screen.width

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51527459

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档