带或且不带的Javascript if else语句

HTML

<div class="big"></div>
<div class="small"></div>

<!--
swapping out var that is set in body
-->
<script>
    // var;
    // var color;
    // var color =;
    // var color = '';
    // var color = 'cat';
    // var color = 'big';
     var color = 'small';
</script>

JS&jQuery

我想说的是

如果未设置var，请执行某些操作

如果设置了var，但没有设置为大或小（我要说明的var字符串），则执行相同的操作

如果设置为“大”，则执行不同的操作

如果设置为“小”，则执行不同的操作

最终发生的是，第一个条件总是运行，因为当设置“大”时，“小”是未设置的，而当设置“小”时，“大”是未设置的

if（typeof color=='undefined'| | color！='big'| | color！='small'）{
$（'.big，.small'）.css（'background-color'，'#333'）；
}else if（颜色==‘大’）{
$（'.big'）.css（'background-color'，'fad400'）；
}如果为else（颜色=='small'）{
$（'.small'）.css（'background-color'，'fad400'）；
}
$（'body'）。附加（''+color+''）

我如何编写这个if语句来解释我的var颜色的所有场景，同时仍然针对两个特定选项

---

下面是一个工作示例

您需要这样编码：

if ( typeof color === 'undefined' || (color != 'big' && color != 'small') ) {
    $('.big,.small').css('background-color', '#333');       
} else if ( color === 'big' ) {
    $('.big').css('background-color', '#fad400');
} else if ( color === 'small' ) {
    $('.small').css('background-color', '#fad400');
}

这样，你说的是：如果它是未定义的或（不是大的或不是小的）

编辑：根据下面塔德曼的建议，这更简单：

if ( color === 'big' ) {
    $('.big').css('background-color', '#fad400');
} else if ( color === 'small' ) {
    $('.small').css('background-color', '#fad400');
} else {
    $('.big,.small').css('background-color', '#333');       
}

---

为什么有三个等号？'='这是推荐的做法，@derstrom8。它不仅检查值，还检查数据类型。我每天都学到新东西！=）停止这些类型的_var===‘未定义’检查。不要使用undefined，这会让人困惑。使用检查null或未定义的_var==null。可能值得将

big

和

small

测试提升到最前面，以便最后一个测试已经排除了这些测试。

if ( typeof color === 'undefined' || (color != 'big' && color != 'small') ) {
    $('.big,.small').css('background-color', '#333');       
} else if ( color === 'big' ) {
    $('.big').css('background-color', '#fad400');
} else if ( color === 'small' ) {
    $('.small').css('background-color', '#fad400');
}

if ( color === 'big' ) {
    $('.big').css('background-color', '#fad400');
} else if ( color === 'small' ) {
    $('.small').css('background-color', '#fad400');
} else {
    $('.big,.small').css('background-color', '#333');       
}