如何根据选择器

Question

我的状态中有一个对象，如下所示：

{
  city1: {
    name: 'Beijing',
    video: 'https://www.youtube.com/watch?v=8HK0MBLLVO8',
  },
  city2: {
    name: 'Shanghai',
    video: 'https://www.youtube.com/watch?v=G8wxzMiPo0U',
  },
  city3: {
    name: 'Chengdu',
    video: 'https://www.youtube.com/watch?v=LlTVHr4-usg',
  },
};

我现在需要根据选择器（城市名称）访问视频元素的值。

我如何读取此特定视频元素的值？

所以我有另一个名为activeCity的const。然后根据这个const我需要检索对象中匹配视频元素的值。

Answer 1

您可以将原始数据转换为{city: video}格式。

var cities = {
  city1: {
    name: 'Beijing',
    video: 'https://www.youtube.com/watch?v=8HK0MBLLVO8',
  },
  city2: {
    name: 'Shanghai',
    video: 'https://www.youtube.com/watch?v=G8wxzMiPo0U',
  },
  city3: {
    name: 'Chengdu',
    video: 'https://www.youtube.com/watch?v=LlTVHr4-usg',
  },
};
var transformed = {};
for (var key in cities) {
    transformed[cities[key]['name']] = cities[key]['video'];
}

然后像这样访问城市的视频。

var video = transformed['Beijing'];

Answer 2

您需要遍历对象，直到找到具有所需名称的城市。

我编写了一个函数getCityVideo(cityName)，它使用for..in循环执行此操作。

var cities = {
  city1: {
    name: 'Beijing',
    video: 'https://www.youtube.com/watch?v=8HK0MBLLVO8',
  },
  city2: {
    name: 'Shanghai',
    video: 'https://www.youtube.com/watch?v=G8wxzMiPo0U',
  },
  city3: {
    name: 'Chengdu',
    video: 'https://www.youtube.com/watch?v=LlTVHr4-usg',
  },
};

function getCityVideo(cityName) {
  for (var city in cities) {
    if (cities[city].name === cityName) {
      return cities[city].video;
    }
  }
}

// example usage
document.write(getCityVideo('Shanghai'));