Question

我从API获取天气数据并希望显示图标。

它看起来像这样:(用于测试我现在没有使用api数据）

var icon = "clear-night";

if (icon == "clear-day") {
  icon = "day-sunny";
}
if (icon == "clear-night") {
  icon = "night-clear";
}
if (icon == "rain") {
  icon = "raindrops";
} else {
  icon = "thermometer";
}
console.log(icon);

如果我删除“其他”部分，它会打印出“通宵” - 但如果我有“其他”，则打印出“温度计”。这是完全基本的，但我无法弄明白...... 谢谢！

Answer 1

这是因为您基本上忽略了您为icon考虑的任何先前值。

在您的情况下，您考虑icon的值是"clear-day"还是"clear-night"，然后检查它是否为"rain"。如果"rain" else只有if的{{1}}条款被执行。

如果条件相互排斥，则需要使用else if。

var icon = "clear-night";

if (icon == "clear-day") {
    icon = "day-sunny";
}
else if (icon == "clear-night") {
    icon = "night-clear";
}
else if (icon == "rain") {
    icon = "raindrops";
} else {
    icon = "thermometer";
}

console.log(icon);

更好的是，正如其他人在评论中所建议的那样，使用switch构造。

var icon = "clear-night";

switch(icon) {
case "clear-day":
    icon = "day-sunny";
    break;
case "clear-night":
    icon = "night-clear";
    break;
case "rain":
    icon = "raindrops";
    break;
default:
    icon = "thermometer";
}
console.log(icon);

Answer 2

每当我看到这样的结构时，我就开始思考一个简单的地图是否是一个理想的解决方案。

以下是一个例子。

＆＃13;

function daymap(icon) { 
  return {
    "clear-day": "day-sunny",
    "clear-night": "night-clear",
    "rain": "raindrops" 
  }[icon] || "thermometer";
}

console.log(daymap("clear-night"));
console.log(daymap("rain"));
console.log(daymap("other"));

＆＃13;

Javascript if / else天气总是进入其他地方

2 个答案: