为什么我的switch语句运行多个case？

Question

我有以下功能:

$("#drpType").change(function () {
    var SelectedVal = this.value;
    switch (SelectedVal) {
        case "2021":
            console.log('a');
            console.log('b');
        case "2020":
            console.log('a');
        case "ADB":
            console.log('b');
        case "PWP":
            console.log('c');
    }
}

为何,何时SelectedVal是2021,是否打印a,b,a,b,c？

在jsfiddle中创建了场景.现在我能够理解你的问题.选择2021时返回2个div.并且如果switch语句基于fall-thought那么为什么它如果选择EFGH只有一个div可见而不是3 那么开心呢？

<select id="drpQuotaType" >
  <option value="0">Select</option>
  <option value="2021">2021</option>
  <option value="2020">2020</option>
  <option value="ABCD">ABCD</option>
  <option value="EFGH">EFGH</option>
</select>

<div id="dv1" style="display:none">Div 1 </div></br>
<div id="dv2" style="display:none">Div 2 </div></br>
<div id="dv3" style="display:none">Div 3 </div></br>
<div id="dv4" style="display:none">Div 4 </div>


$("#drpQuotaType").change(function () {
            var SelectedVal = this.value;
            $('#dv1').hide();
            $('#dv2').hide();
            $('#dv3').hide();
            switch (SelectedVal) {
                case "2021":
                    $('#dv1').show();
                    $('#dv2').show();
                case "2020":
                    $('#dv2').show();
                case "ABCD":
                    $('#dv2').show();
                case "EFGH":
                    $('#dv3').show();
            }

});

Answer 1

您错过了break;关于每个案例的陈述:

$("#drpType").change(function () {
    var SelectedVal = this.value;
    switch (SelectedVal) {
        case "2021":
            console.log('a');
            console.log('b');
            break;
        case "2020":
            console.log('a');
            break;
        case "ADB":
            console.log('b');
            break;
        case "PWP":
            console.log('c');
            break;
    }

Answer 2

这是因为你没有break声明.没有它,代码将"落空".

var x = 10;
switch (x) {
  case 10:
    console.log('With break');
    break;
    
  case 20:
    console.log('I never run');
    break;
}

console.log('-------');

switch (x) {
  case 10:
    console.log('Without');
  case 20:
    console.log('a break');
  case 30:
    console.log('it just');
  case 40:
    console.log('keeps going');
}

存在的原因是因为有时它会有用.您可以想象一个案例,您正在更新游戏状态以及针对特定类型的敌人以及所有敌人发生的事情.

var characterType = 'big boss';

switch (characterType) {
  case 'big boss':
    console.log('Update the big boss');
  
  case 'enemy':
    console.log('The big boss is also an enemy so run the basic enemy code');
    break;
    
  case 'player':
    console.log('The boss is not a player so we will not run this.');
    break;
}

利用漏洞并不常见,但确实有其用例.

最后,这是您的代码应该是什么样子:

$("#drpType").change(function () {
    var SelectedVal = this.value;
    switch (SelectedVal) {
        case "2021":
            console.log('a');
            console.log('b');
            break; // <--

        case "2020":
            console.log('a');
            break; // <--

        case "ADB":
            console.log('b');
            break; // <--

        case "PWP":
            console.log('c');
            break; // optional. It's visually consistent but doesn't do anything
    }
}