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

我对如何设置多个条件有疑问。基本上，我有三个条件可以读取或侦听浏览器视口。第一个和第二个条件起作用，但第三个条件似乎没有触发。是因为与第二个条件冲突吗

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

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

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

if（$（窗口）.width（）>1280）{
console.log（'desktop'）；
}
else if（$（窗口）.width（）<1280）{
console.log（“平板电脑”）；
}
else if（$（窗口）.width（）<780）{
console.log（'mobile'）；
}

您的第二个条件也包括第三个条件。因为低于

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');
}

const windowWidth=$（window.width（）；
如果（窗口宽度>1280）{
console.log（'desktop'）；
}否则如果（windowWidth<1280&&windowWidth>=780）{
console.log（“平板电脑”）；
}否则如果（窗宽<780）{
console.log（'mobile'）；
}

---

另外，最好将

窗口保持在一个变量中，而不是每次与jQuery一起使用。
这是因为您的第二个
else/if
。如果
$（window）.width（）
小于
780
，则它也小于
1280

换成

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

else如果（$（窗口）.width（）>=780&&$（窗口）.width（）<1280）{
console.log（“平板电脑”）；
}
您的第二种情况中存在缺陷…下面是修复方法。希望有帮助

 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');
        }

if（$（窗口）.width（）>1280）{
console.log（'desktop'）；
}
如果（$（window.width（）<1280&&$（window.width（）>=780），则为else{
console.log（“平板电脑”）；
}
else if（$（窗口）.width（）<780）{
console.log（'mobile'）；
}
这是因为也满足了
<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');
}

if（$（窗口）.width（）>=1280）{
console.log（'desktop'）；
}
如果（$（window.width（）<1280&&$（window.width（）>=780），则为else{
console.log（“平板电脑”）；
}
else if（$（窗口）.width（）<780）{
console.log（'mobile'）；
}

您还忘记了一个例子，如果用户的屏幕分辨率等于
1280
，您将永远不会输入任何条件。我将
更改为
=
以包含该案例。
您也可以尝试此操作，它将满足您的第二个条件

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

if（$（窗口）.width（）>1280）{
console.log（'desktop'）；
}
else if（$（窗口）.width（）<1280）{
如果（$（窗口）.width（）<780）{
console.log（'mobile'）；
}否则{
console.log（“平板电脑”）；
}
}

或

if（$（窗口）.width（）>1280）{
console.log（'desktop'）；
}
否则{
如果（$（窗口）.width（）<780）{
console.log（'mobile'）；
}否则{
console.log（“平板电脑”）；
}
}
这里有一个更简洁的例子，但条件取决于顺序，有些人不喜欢这种风格，但我认为它是可以的，我们可以添加注释

//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');
}

//不要更改条件顺序
如果（$（window）.width（）希望这能让您满意，您可以检查一下

不同的是，这显示在控制台的宽度容易理解这个逻辑，如果你不能理解让我知道

这是
$（窗口）.bind（“调整大小”，函数（）{
sizewindow=$（this.width（）；
console.log（sizewindow）
如果（尺寸范围<780）{
console.log（'mobile'）；
}否则如果（7801280）{
console.log（'rick和morty去世两年了'sad af'）
}
}
})；
正确的方法是将第三种情况移至第二种情况

进行此类检查时，始终将最大限制条件放在第一位

就您而言，最整洁的方式是：

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');
}

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

这确实是一个轻松的操作，但是想象一下，您正在检查的不是
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');
}

您的第三个条件包含在第二个条件中。因此，您可以在第二个条件之前使用第三个条件。
If/else
与
switch
不同。在任何需求匹配条件下，它都会返回。唯一包含对“错误”原因的良好描述的答案发生。应被接受这不是一个好答案。如果
和
在
windowsWidth
上都包含冗余检查，如果您说这不是一个好答案，可能您有更好的解决方案。向我们展示它。一行语句和donwvote，多么有趣world@SurenSrapyan下面是我的答案，你的解决方案如何更好比这一个更好？也许在性能上，也许在可读性上，或者其他方面。只是你用了
宽度
的次数少了一次？还有为什么你用
else
做最后一个语句，QO有
else如果
，也许他也想检查480分辨率？为什么否决我做错了什么？为什么这么讨厌低声誉的用户请查看我的命令nt到@SurenSrapyan answer。顺便说一句，我的名声和你差不多。请不要像上面那个家伙那样生气。我们需要为OP提供最好的答案，你们两个都在插入多余的条件检查。
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');
}