我怎样才能在两个图标之间切换？

Question

我是 JavaScript 的新手，我正在制作一个天气应用程序，它运行良好，但问题出在图标上，当我输入另一个国家/地区以查看天气时，新国家/地区图标会显示在顶部以前的国家图标，我想隐藏以前的图标并显示新的我尝试了 if 语句和 switch case 方法，但它没有用

这是我的 html 代码：

<form>
  <input class="input" type="text" placeholder="type your country">
</form>

<button class="button">SUBMIT</button>

<div class="location">
  <h1 class="timezone">TIMEZONE</h1>
  <div id="icons" class="">
    <img id="cloud" class="hide" src="./gifs/cloud.png">
    <img id="clouds" class="hide" src="./gifs/clouds.png">
    <img id="cloudy" class="hide" src="./gifs/cloudy.png">
    <img id="rain" class="hide" src="./gifs/rain.png">
    <img id="snowflake" class="hide" src="./gifs/snowflake.png">
    <img id="storm" class="hide" src="./gifs/storm.png">
    <img id="sun" class="hide" src="./gifs/sun.png">
    <img id="wind" class="hide" src="./gifs/wind.png">
  </div>
</div>

这是我的 javascript 代码：

const temp = data.main.temp - 273.15 ;
const celsius = temp.toPrecision(3);
const descripiton = data.weather[0].description;
const name = data.name;
tempDeg.textContent = celsius;
tempDes.textContent = descripiton;
tmZn.textContent = name;
switch(descripiton){
  case "mist" :
    document.getElementById("wind").classList.remove("hide");
    break;
  case "clear sky" : 
    document.getElementById("sun").classList.remove("hide");
    break;
  case "broken clouds" : 
    document.getElementById("clouds").classList.remove("hide");
    break;
  case "shower rain" : 
    document.getElementById("rain").classList.remove("hide");
    break;
  case "thunderstorm" : 
    document.getElementById("storm").classList.remove("hide");
    break;
  case "snow" :
    document.getElementById("snow").classList.remove("hide");
    break;
  case "few clouds" : 
    document.getElementById("cloudy").classList.remove("hide");
    break;
  case "scattered clouds" : 
    document.getElementById("cloud").classList.remove("hide");
    break;
}

Answer 1

您需要使用类似 for 循环的方法来隐藏所有内容。

var icons = document.querySelector("#icons").children;
for (var i=0; i<icons.length; i++) {
  icons[i].classList.add("hide");
}

然后按照您在代码中所做的那样，从您希望显示的对象中移除隐藏 class。

Answer 2

如果您只显示一个图标，除了隐藏所有图标还有另一种方法

 var iconName = 'default'
 switch(descripiton) {
                    case "mist" :
                    iconName = 'wind';
                    break;
                    case "clear sky" : 
                    iconName = 'sun';
                    break;
                    case "broken clouds" : 
                    iconName =  'clouds'
                    break;
                    // add rest of items here
                }

document.getElementById("icons").innerHTML = '<img src="./gifs/' + iconName + '.png">';

如果您想保留当前的方法，请先隐藏所有图标，然后仅显示所需的图标

var images = document.getElementById('icons').querySelectorAll('img');
    for (i = 0; i < images.length; i++){
        images[i].classList.add('hide');      
    }

在你的 switch 中，使相关项目可见，如下所示

document.getElementById("wind").classList.remove("hide");

我怎样才能在两个图标之间切换？

how can i swap between two icons?

javascript

swap