如何使用带有多个变量的开关？答案

【问题标题】：How to use switch with more than one variable?如何使用带有多个变量的开关？
【发布时间】：2018-07-27 22:08:23
【问题描述】：

我使用的是雅虎天气，大约有 47 种天气状况，从 0 到 47，每个数字代表天气状况。

我想获得 4 天、今天和接下来 3 天的条件，所以如果我为每个使用 switch 语句，将会有很长的 switch 语句代码。

我的代码现在适用于今天的条件：

var src = ""; //This variable will contain an icon that represents the weather condition.

switch(todayCondition){ //todayCondition is today condition it's in the range [0-47]

    case "0":
        src = 'storm.svg';
    break;
    ........
    ........
    case  "47":
        src = 'rain.svg';
    break;

}

document.getElementById('todayWeatherIcon').src = src;

html:

 <img id = 'todayWeatherIcon' />

接下来 3 天的条件还有 3 个其他变量，它们也将在 0-47 之间，并且根据数字具有相同的图标。

如何在不重复相同代码的情况下对其他 3 个变量做同样的事情？

【问题讨论】：

你的图标都是"condition<some number>Img.png"吗？如果是这样，为什么不完全摆脱开关而只做src = "condition" + todayCondition + "Img.png";？然后每天重复一遍。
对不起，看来你错过了理解我，我没有解释清楚，图标名称不是“条件”+今天条件+“Img.png”； , 这只是一个指示, 图标就像 cloudy.svg , rain.svg , ...等
我会编辑问题
@peter，但如果你的“条件”总是从0..47生成整数，你可以使用var src = arrayOfIconNames[todayCondition];

标签： javascript jquery html switch-statement

【解决方案1】：

如果图像名称都不同，那么您最好使用字符串数组，如下所示：

var images = ["cloudy.svg", "sunny.svg", "rainy.svg"];

// Arrays are designed to work with numeric index values:
console.log(images[0]);
console.log(images[1]);
console.log(images[2]);
console.log("--------------")

// Javascript also accepts "numeric strings" as array index values:
console.log(images["0"]);
console.log(images["2"]);
console.log("--------------")

// Or using a variable, this is the closest to what you need to do:
var todayCondition = "1";
var src = images[todayCondition];
console.log(src);

【讨论】：

【解决方案2】：

你应该简单地使用一个函数：

function getIcon(weatherCondition) 
{
    var src = ""; //This variable will contain an icon that represents the weather condition.
    switch(weatherCondition){ //weatherCondition is the weather condition it's in the range [0-47]
        case "0":
            src = 'storm.svg';
            break;
        ........
        ........
        case  "47":
            src = 'rain.svg';
            break;
    }
    return src;
}

var day1Condition = getIcon(todayCondition);
var day2Condition = getIcon(tomorrowCondition);
...
document.getElementById('todayWeatherIcon').src = day1Condition;
document.getElementById('tomorrowWeatherIcon').src = day2Condition;
...

【讨论】：

【解决方案3】：

你可以像这样设置条件

src = 'condition'+todayCondition+'Img.png'; document.getElementById('todayWeatherIcon').src = src;

【讨论】：

对不起，看来你错过了理解我，我没有解释清楚，图标名称不是“条件”+今天条件+“Img.png”； , 这只是一个指示, 图标就像 cloudy.svg , rain.svg , ...等
你能把你的条件放在一个数组中，然后调用数组位置吗？ arry[4] = "cloudy.png", arry[5]="sunny.png"...

【解决方案4】：

不需要多个 switch 语句，因为您有一个固定的文件名，文件名中包含每个天气条件编号，您可以这样做

var src = "";
// concatenate todayCondition with the rest of the file name
src = "condition" + todayCondition + "Img.png";

document.getElementById('todayWeatherIcon').src = src;

注意：只有在您知道文件名在不久的将来不会更改时，您才应该这样做

【讨论】：

对不起，看来你错过了理解我，我没有解释清楚，图标名称不是“条件”+今天条件+“Img.png”； , 这只是一个指示, 图标就像 cloudy.svg , rain.svg , ...等
要么使用 switch 语句，要么使用数组并将它们的索引设置为可能的天气值，就像 @Brettc 指定的那样。