Question

我正在使用JavaScript，jQuery，html和css为我的网站构建天气应用程序。我从api获取我的天气数据。 api有几种不同的当前条件可能，例如Rain，Snow等。我使用的是我在网上找到的开源天气图标包。我的目的是将适当的图标与可能从api反馈到我的应用程序的每个可能条件相关联。我决定采用的方法，并且请注意，我在网络和JavaScript开发方面都是全新的，所以这可能不是一个好主意，但我决定创建一个具有键值对的对象。键将包含所有潜在条件，而值将是该条件的相应html图标的类名。这是我所谈论的片段。

var condition = data.current.weather; //value coming from API

var allConditions = {
  Light Drizzle: 'wi wi-showers',
  Heavy Drizzle: 'wi wi-showers',
  Drizzle: 'wi wi-showers',
  Light Rain: 'wi wi-rain',
  Heavy Rain: 'wi wi-rain',
  Rain: 'wi wi-rain',
  Light Snow: 'wi wi-snow',
  Heavy Snow: 'wi wi-snow',
  Snow: 'wi wi-snow',
  Light Snow Grains: 'wi wi-snow'
}

$('#icon').addClass(allConditions[currentCondition]);

正如您所看到的，有几个条件我将使用相同的图标，换句话说，对象中有几个具有相同值的键。有什么方法可以为几个键分配相同的值？例如......

var allConditions = {
  'Light Drizzle, Heavy Drizzle,
   Light Rain , Heavy Rain' : 'wi wi-showers',
   'Light Snow, Heavy Snow' : 'wi wi-snow'
}

我知道这个例子不会起作用，但我在这里使用它只是为了看到我想要完成的事情。现在我只给每个键给它自己的值，即使其他几个键的值相同，但如果有一种方法可以优化它，我很想知道它！

Answer 1

您可能希望编写一个接受天气条件作为参数的函数，并返回正确的类，而不是将此数据存储在对象文字中。它甚至可能是switch statement的一个很好的用例。

function conditionToClass(condition) {
  var className = 'wi wi-';

  switch (condition) {
    case 'Drizzle':
    case 'Light Drizzle':
    case 'Heavy Drizzle':
      return className + 'showers';
    case 'Rain':
    case 'Light Rain':
    case 'Heavy Rain':
      return className + 'rain';
    case 'Snow':
    case 'Light Snow':
    case 'Heavy Snow':
    case 'Light Snow Grains':
      return className + 'snow';
    default:
      return 'some-default-class';
  }
}

var weatherClass = conditionToClass(data.current.weather);

$('#icon').addClass(weatherClass);

JavaScript对象中具有相同值的几个键

1 个答案: