如何解决如何在两个图标之间切换?
我是 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;
}
解决方法
您需要使用 for
循环之类的方法隐藏所有内容。
var icons = document.querySelector("#icons").children;
for (var i=0; i<icons.length; i++) {
icons[i].classList.add("hide");
}
然后从您希望显示的类中删除隐藏类,就像您在代码中所做的那样。
,如果你只显示一个图标,还有另一种方法而不是隐藏所有图标
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');
}
在您的开关中使相关项目像这样可见
document.getElementById("wind").classList.remove("hide");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。