Question

我遇到了如何设置多个条件的问题。基本上我有三个条件可以读取或收听浏览器视口。第一个和第二个条件正在起作用，但第三个条件似乎没有触发。是因为与第二个条件发生冲突吗？

{{1}}

Answer 1

你的第二个条件还包括第三个条件。因为低于780的每个值也低于1280。您需要windowWidth < 1280 && windowWidth >= 780之类的内容来提供范围。

const windowWidth = $(window).width();

if(windowWidth  > 1280) {
    console.log('desktop');
} else if (windowWidth  < 1280 && windowWidth  >= 780 ) {
   console.log('tablet');
} else if (windowWidth  < 780) {
   console.log('mobile');
}

最好将window保存到变量中，而不是每次都使用jQuery。

Answer 2

这是因为你的第二个else/if。如果$(window).width()小于780，则其也小于1280

将其更改为

else if ( $(window).width() >= 780 && $(window).width() < 1280) {
    console.log('tablet');
}

Answer 3

这是一个更简洁的例子，但条件依赖于顺序，有些人不喜欢这种风格，但我认为没关系，我们可以添加评论。

//Do not change the condition order
if($(window).width() <= 780) {
    console.log('mobile');
}

else if ($(window).width() <= 1280) {
    console.log('tablet');
}

else {
    console.log('desktop');
}

编辑：条件应 *而不等于 ....

Answer 4

你的第二个条件存在缺陷......下面是修复......希望它有所帮助!!

 if($(window).width() > 1280) {
            console.log('desktop');
        }

        else if ($(window).width() < 1280 && $(window).width() >= 780) {
            console.log('tablet');
        }

        else if ($(window).width() < 780) {
            console.log('mobile');
        }

Answer 5

这是因为< 780之前的条件也得到满足（即如果宽度等于600则低于1280）。更改条件顺序，或者更好地改进第二个条件：

if($(window).width() >= 1280) {
    console.log('desktop');
}
else if ($(window).width() < 1280 && $(window).width() >= 780) {
    console.log('tablet');
}
else if ($(window).width() < 780) {
    console.log('mobile');
}

您还忘记了一个案例，如果用户的屏幕分辨率等于1280，您就永远不会输入任何条件。我将>更改为>=以包含该案例。

Answer 6

你也可以试试这个，它会满足你的第二个条件

if ($(window).width() > 1280) {
  console.log('desktop');
}
else if ($(window).width() < 1280) {
  if ($(window).width() < 780) {
    console.log('mobile');
  } else {
    console.log('tablet');
  }
}

或

if ($(window).width() > 1280) {
      console.log('desktop');
    }
    else {
      if ($(window).width() < 780) {
        console.log('mobile');
      } else {
        console.log('tablet');
      }
    }

Answer 7

这样做的正确方法是将你的第三个条件提升到第二个位置。

进行此类检查时，始终首先放置最严格的条件。

在您的情况下，最整洁的方式是：

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

if (w < 780) {               // most restrictive condition. Excludes all the others...
    console.log('mobile');
} else if (w < 1280) {       // this one includes the one above but it will never be triggered if w < 780
    console.log('tablet');
} else {                     // all the other cases
    console.log('desktop');
}

与许多人说的相反，不需要这个else if声明：

else if (windowWidth < 1280 && windowWidth >= 780) { ... }

这会增加不必要的冗余检查。

这肯定是一个轻松的操作，但想象一下，而不是windowWidth < 1280你正在检查

functionForCalculatingWidth() : int {
   // huge amount of lines with expensive computation
   return result;
}

你将两次调用相同的函数。看看为什么它设计不好？

同样地，如果您要根据最大元素检查条件（加上让我们添加另一个虚构条件），您可以这样做：

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

if (w > 1280) {
    console.log('desktop');
} else if (w > 990) {
   console.log('weird device');
} else if (w > 780) {
    console.log('tablet');
} else {
    console.log('mobile');
}

Answer 8

希望这会让你满意，你可以检查一下。

不同的是，如果你不明白让我知道，这表明控制台中的宽度易于理解这个逻辑

这是fiddle

$(window).bind("resize", function() {
  sizewindow = $(this).width();
  console.log(sizewindow)
  if (sizewindow < 780) {
    console.log('mobile');
  } else if (780 < sizewindow < 1280) {
    console.log('szechuan sauce');
    if (sizewindow > 1280) {
      console.log('rick and morty gone for 2 years sad af')
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用javascript创建多个if / else条件

8 个答案: