为什么我的 switch 语句运行多个案例? [英] Why is my switch statement running multiple cases?

问题描述

我有以下功能:

$("#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?

Why, when SelectedVal is 2021, is it printing a,b,a,b,c?

在 jsfiddle 中创建场景.现在我能够理解你我的问题了.When select 2021 it return 2 divs.如果 switch 语句基于 fall-thought 那么为什么它会发生，如果选择 EFGH 唯一一个可见的 div 而不是 3?

Created scenario in jsfiddle. Now i am able to understand you my question. When select 2021 it return 2 divs. and if switch statement base on fall-thought so why its happning that if select EFGH the only one div visible instead of 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();
            }

});

推荐答案

这是因为您没有 break 语句.没有它，代码就会失败".

It's because you don't have a break statement. Without it, the code will "fall through".

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

之所以存在这种情况，是因为有时失败很有用.您可以想象这样一种情况:您正在更新游戏状态以及针对特定类型的敌人以及所有敌人会发生什么事情.

The reason this exists is because sometimes it's useful to fall through. You could imagine a case where you're updating the state of a game and what stuff to happen for a specific kind of enemy as well as for all enemies.

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

利用fall-through并不是很常见，但它确实有它的用例.

It's not incredibly common to utilize fall-through but it does have its use cases.

最后，您的代码应该如下所示:

Finally, here's what your code should look like:

$("#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
    }
}

这篇关于为什么我的 switch 语句运行多个案例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！