javascript - 通过从 json 读取数据来更改路径类

Question

首先我要说的是我完全不适应；由于我们正在进行工作重组，我需要承担一些额外的职责 - 例如进行一些可视化。

所以我的问题如下:我有一个 svg map ，其中 200 多个路径中的每一个都有自己的 id。我还有一个具有多个属性的 json 文件。所以我想做的是，当你按下一个按钮时，每个路径都会获得一个基于 json 文件的类，其中 json id = 路径 id。然后路径会被 css 文件中的颜色填充。

[{
  "id": "a",
  "up": "users: 124"
  "class": "test"
},
{
  "id": "b",
  "up": "users: 4"
  "class": "test2"
}];

和

$('#button').on("click", function() {
$('.test').css({ fill: "#f6eff7" });
$('.test2').css({ fill: "#a6bddb" });

和

<path id="a" class="" d="..." />
<path id="b" class="" d="..." />
<button class="btn" id="button">2018</button>

Answer 1

您可以收听click在您的<button>上并使用 Array#forEach 添加类循环访问您的数据:

let data = [{
    "id": "a",
    "up": "users: 124",
    "class": "test"
  },
  {
    "id": "b",
    "up": "users: 4",
    "class": "test2"
  }
];

document.getElementById('button').addEventListener('click', function() {
  data.forEach(current => {
    document.querySelector('path#' + current.id).classList.add(current.class);
  });
});

.test {
  fill: red;
}

.test2 {
  fill: blue;
}

<svg>
<path id="a" class="" d="M150 0 L75 200 L225 200 Z" />
<path id="b" class="" d="M100 0 L75 100 L125 100 Z" />
</svg>
<button class="btn" id="button">Add classes</button>