让我先说一下我完全脱离了我的元素;因为我们正在进行重组工作,所以我需要承担一些额外的责任 - 例如制作一些可视化。
所以我的问题如下:我有一个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>
您可以在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>
使用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);
}
});