带有OR和IS NOT的Javascript if else语句

Question

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>

CSS

.big {height:100px;width:100px;background:#eaeaea;}
.small {height:50px;width:50px;background:#eaeaea;}

JS＆amp; jQuery的

我想说的是

1. 如果未设置var，则执行somethign
如果设置了var但没有设置为大或小（我想要考虑的var字符串），
2. 做同样的事情。
3. 如果设置为大做不同的事情
4. 如果设置为小做不同的事情

最终发生的事情是第一个条件总是运行，因为当 设置为 时， 设置为 不是设置

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

$('body').append('<div>' + color + '</div>')

我如何编写这个if语句来说明我的var颜色可能仍然针对两个特定选项的所有场景？

这是一个工作示例http://jsfiddle.net/designaroni/4zba5yo9/

Answer 1

你需要像这样编码：

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

这样，你说：如果它未定义OR（不大而且不小）

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

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