如何纠正这段jquery代码的输出？
如何纠正这段jquery代码的输出？
提问于 2018-07-26 04:50:40
下面的代码应该打印出来：
如果屏幕宽度< 740或为740，则为
- 。如果屏幕宽度为>740且屏幕宽度为<1065，则为
- 如果屏幕宽度为>1065或为1065，则为
- 如果屏幕宽度为>1389或为1389，则为
但当第四个条件为真时，它总是随机显示2或3。
这里有什么问题？看一看控制台。
https://codepen.io/code_alex/pen/xJLwpq
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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-26 05:05:15
正确设置的条件如下所示。
除非您确实需要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。
Stack Overflow用户
发布于 2018-07-26 04:58:09
一旦else if的一个分支为真，则执行将结束，而不是检查另一个分支是否也为真。根据您的逻辑，如果您的screenWidth为1400，则screenWidth > 1065 || screenWidth == 1065为true，因此您不会到达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");
}Stack Overflow用户
发布于 2018-07-26 05:03:26
或者你可以这样做
var i,warr=[0,740,1065,1389],
w=screen.width;
for (i=0;warr[i]<=w;i++){}
console.log(i);@Barmar:谢谢你的提示re：screen.width！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51527459
复制相关文章
相似问题
腾讯云开发者
