如何将多个jQuery鼠标悬停函数组合成一个可重用的鼠标悬停函数

我用D3创建了一张地图，并用下面的json文件（名为city.json）在地图上添加了城市名称和绘制点：

城市点和城市名称完美地显示在地图上。每个点和名称都有一个类名/编号（使用d3），因此我可以针对每个特定元素

然后，我使用jQuery向城市点添加了mouseover和mouseout函数，这样我就可以显示该点的纬度（lat）和经度（lon），这些信息写在json文件中。一切都很好，当我将鼠标移到不同的点上时，正确的信息会显示出来，当我将鼠标移出时，信息会消失。下面是我的jQuery鼠标覆盖/输出函数：

 $(".cityPoints1").mouseover(function() {
   d3.select("div.tooltip")
   .html([citiesData[1].lon, " " + citiesData[1].lat])
  .style("visibility", "visible")
  .style("top",  "100px")
  .style("left", "100px");
});
$(".cityPoints1").mouseout(function() {
  d3.select("div.tooltip")
  .html([citiesData[1].lon,  citiesData[1].lat])
  .style("visibility", "hidden");
});
$(".cityPoints2").mouseover(function() {
  d3.select("div.tooltip")
  .html([citiesData[2].lon," " + citiesData[2].lat])
  .style("visibility", "visible")
  .style("top",  "100px")
  .style("left", "100px");
});
$(".cityPoints2").mouseout(function() {
  d3.select("div.tooltip")
  .html([citiesData[2].lon, citiesData[2].lat])
  .style("visibility", "hidden");
}); 

我喜欢做的是，如果可能的话，将mouseover函数组合成一个函数，将mouseout函数组合成一个函数，并且仍然显示json文件中的正确信息（当用户mouseover一个点时，将显示正确的lat和long数据）

我也喜欢这个函数是可扩展的，能够容纳json文件中新添加的信息（点）（可以将鼠标移到新添加的点上，并显示正确的数据）

---

我希望这个问题很清楚，我真的很感谢任何人在这个问题上的帮助。提前谢谢。TonyT

我建议为目标元素创建变量，而不是像下面所示将其传递给DOM对象

 var city1 = $('.cityPoints1');

然后使用事件处理程序

。on

将触发它们

city1.on('mouseover mouseout', function(){
    city1.stop();
});

---

希望这会有帮助，你能给所有的城市点增加一个类，然后触发它吗

$(document).ready(function() {
    $("div.citypoint").mouseover(function (e) {
      mouseOver_Event(e);        
    });    
});

function mouseOver_Event(e) {
      console.log(e); 
      var x = $(e.target).attr("id");
      alert(x);
}

我把它放在这里：

https://jsfiddle.net/2ppjf2f7/

如果无法添加该类，并且所有citypoints ID的格式都是citypointX，则可以使用jQuery startswith选择器进行触发：

$('[id^=cityPoint]')

因此，代码如下（）：

---

在JSFIDLE上，您可以查看控制台日志（F12？）并查看e的不同成员。

$（'[id^=cityPoint]'）。mouseover（mouseover_事件）

足够了^^^^^哇…谢谢。我喜欢这个概念，但如何包含json信息呢。当我将鼠标移到点上时，我如何循环并显示与城市点对应的正确json信息（lat和lon）……或者我是否遗漏了某个点？

$('[id^=cityPoint]')

$(document).ready(function() {
      $('[id^=cityPoint]').mouseover(function (e) {
      mouseOver_Event(e);        
    });    
});

function mouseOver_Event(e) {
      console.log(e);
      var x = $(e.target).attr("id");
      alert(x);
}