Question

让我开始说：我完全超出了我的本能；由于我们正在进行工作重组，因此我需要承担一些额外的责任-例如进行一些可视化。

所以我的问题如下：我有一个svg映射，其中200多个路径中的每一个都有其自己的ID。我也有一个具有多个属性的json文件。所以我想做的是，当您按下一个按钮时，每个路径都会得到一个基于json文件的类，其中json id = path id。然后，路径将填充css文件中的颜色。

marker.icon(BitmapDescriptorFactory.fromBitmap(createDrawableFromView(getActivity(), markerView)));

和

[{
  "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" });

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>

Answer 2

使用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);
  }
});

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

2 个答案: