Question

我需要使用数组数据为SVG路径着色。这是功能：

for (var item in colorCollectionArray) {
  var village = colorCollectionArray[item].village;
  var fillColor = 'fill:'+colorCollectionArray[item].colorSet;

  $(SVG).find('path').each(function() {
    var id = $(this).attr('id');
    console.log(id)          
    if (village) {
      if (id.substring(6) === village) {
        $(this).attr('style', fillColor);
      }
    }
  });
}

但是效率不好，加载速度很慢，我需要改进它。在查询了一些建议之后，似乎我应该使用递归。我怎样才能做到这一点？有谁可以提出建议吗？

Answer 1

您不需要遍历数组中每个项目的所有<path>元素。由于您知道自己正在比较村镇字符串，因此可以尝试这样的操作和select via id attribute：

for (var item in colorCollectionArray) {
    var village = colorCollectionArray[item].village,
        fillColor = 'fill:'+colorCollectionArray[item].colorSet,
        path = $(SVG).find('path[id*="' + village + '"]');

  if (path.length) {
    path.attr('style', fillColor);
  }
}

在不知道$(SVG)到底是什么还是没有看到您的标记的情况下，我不知道这是否可以立即使用。

在此函数中使用递归

1 个答案: