jquery - 只想运行一个 if 条件

Question

如果我的 screen width < 1200 会怎么样？那么只有这个alert('1200')显示警报，当我的 screen width < 640那么只有这个alert('640')显示警报。我需要在不使用 else 的情况下执行此操作 block 。

Fiddle

if ($(window).width() < 1200) {
  alert('1200');
}
if ($(window).width() < 640) {
  alert('640');
}

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

Answer 1

使用if/else if。这样只会遵循第一个匹配的分支。请注意，为了使逻辑在这种情况下成功运行，您需要颠倒条件的顺序。试试这个:

if ($(window).width() < 640) {
  alert('640');
} else if ($(window).width() < 1200) {
  alert('1200');
}

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

顺便说一句，检测浏览器宽度通常表明您正在针对不同的分辨率修改 UI。如果是这种情况，您可以通过使用 CSS 媒体查询以更好的方式实现相同的目标。