javascript - 如何在执行第二次搜索时重置 CSS(从第一次搜索中删除搜索结果)

Question

我正在 ES6 中构建一个简单的天气应用程序，它应该从 Spotify 返回一首适合当前天气和预报的歌曲。但是，当用户针对不同位置连续执行两次搜索时，它仍会显示第一次搜索中的歌曲。

目前，我使用 display: none 在 CSS 中隐藏歌曲轨道，并根据 if 语句的搜索结果将显示更改为在 JS 中阻塞。如何从第一次搜索中删除第一首歌曲？

我尝试将 if 语句更改为 switch 语句，但它完全停止显示歌曲。我想到的另一个选择是使用 classList，但我不确定如何...

CSS

#musicRain,
#musicClear,
#musicThunderstorm,
#musicSnow,
#musicClouds,
#musicAtmosphere {
  display: none;
}

JS

function showCurrentWeather(response) {
  let currentTemperature = document.querySelector("#currentTemperature");
  currentTemperature.innerHTML = `${Math.round(response.data.main.temp)}°C`;
[etc... ]

if (response.data.weather[0].main === "Clear") {
    document.getElementById("musicClear").style.display = "block";
  }
  if (response.data.weather[0].main === "Drizzle") {
    document.getElementById("musicDrizzle").style.display = "block";
  }
  if (response.data.weather[0].main === "Rain") {
    document.getElementById("musicRain").style.display = "block";
  }
  if (response.data.weather[0].main === "Clouds") {
    document.getElementById("musicClouds").style.display = "block";
  } else {
    document.getElementById("musicAtmosphere").style.display = "block";
  }
}

Answer 1

您希望将每个元素的 display 字段设置为 block 或 none 以便之前的设置不会停留。由于它们都以“音乐”开头，您可以这样做:

  const types = ["Clear","Drizzle","Rain","Clouds","Atmosphere"];
  types.forEach( type => {
    const musicType = `music${type}`
    if (response.data.weather[0].main === type) {
      document.getElementById(musicType).style.display = "block";
    }
    else {
      document.getElementById(musicType).style.display = "none";
    }
  });