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

问题描述 投票:0回答:2

让我先说一下我完全脱离了我的元素;因为我们正在进行重组工作,所以我需要承担一些额外的责任 - 例如制作一些可视化。

所以我的问题如下:我有一个svg地图,其中200多个路径中的每一个都有自己的id。我还有一个具有多个属性的json文件。所以我想要做的是,当你按下一个按钮时,每个路径都会得到一个基于json文件的类,其中json id = path 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>
javascript jquery html
2个回答
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>

0
投票

使用jQuery:

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

$('.btn').on('click', function() {
  for(var index = 0; index < arr.lenth; i++) {
    $("#" + arr[i].id).addClass(arr[i].class);
  }
});
© www.soinside.com 2019 - 2024. All rights reserved.