如何悬停路径类与数组值匹配的总数?

时间:2018-06-27 16:22:31

标签: javascript jquery leaflet

var nationList = ["Austria", "France", "Austria", "Spain", "Italy", "United States", "France", "Congo", "Austria"];

var count = {};
nationList.sort();
nationList.forEach(function(i) {
  var i = i.replace(/^\s+/g, "");
  count[i] = (count[i] || 0) + 1;
});
console.log(count);
<svg>
      <path class="Austria"></path>
      <path class="France"></path>
      <path class="Italy"></path>
      <path class="United States"></path>
      <path class="Spain"></path>
      <path class="Congo"></path>
    </svg>

我有一个数组:

var nationList = ["Austria", "France", "Austria", "Spain", "Italy", "United States", "France", "Congo", "Austria"];

然后运行以下命令:

var  count = {};
nationList.sort();
nationList.forEach(function(i) { 
  var i = i.replace(/^\s+/g, "");
  count[i] = (count[i]||0) + 1;
});
console.log(count);

它给了我

Austria: 3
France: 2
Italy: 1
United States: 1
Congo: 1
Spain: 1

现在我有一系列的svg paths,国名为类:

<svg>
  <path class="Austria"></path>
  <path class="France"></path>
  <path class="Italy"></path>
  <path class="United States"></path>
  <path class="Spain"></path>
  <path class="Congo"></path>
</svg>

如果我mousehover Austria,我应该在控制台中获得3

注意

我有leaflet map

创建为图层的路径

1 个答案:

答案 0 :(得分:0)

我可能丢失了一些内容,但是您已经有了count变量,因此,假设SVG嵌入在页面的标记中,而不是外部文件中……

<path id="Austria" onmouseover="printCount(this)"></path>

...

var count = {};
nationList.sort();
nationList.forEach(function(i) { 
  var i = i.replace(/^\s+/g, "");
  count[i] = (count[i]||0) + 1;
});
console.log(count);

function printCount(path) {
    console.log(count[path.id.replace(/^\s+/g, "")]);
}